Stopping divs aligning horizontally.

Discussion in 'HTML & Website Design' started by Rhysjc, Aug 4, 2010.

0
  1. #1
    The page i'm currently building consists as a header that stretches the width of the page, and then two columns below. I have two divs in the left column, and i'm having a problem with them. The first div which displays just some text is fine, but the second div(which is also just text) is horizontally aligned with it. My aim is for the second div to appear below the first div without using anything but HTML and CSS. Here's an image for you to see my problem:
    [​IMG]

    Uploaded with ImageShack.us

    The "My Recent Adventures" text should appear under the "This is my blog..." text.

    HTML code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="A blog by a teenager about everything. Technology, travelling, life, school, interesting stuff, the internet, tutorials and more." />
<meta name="keywords" content="blog, technology, travelling, life, school, boredom, bored, internet, tutorials, guides, sharing, pictures, twitter, links, advertise, sponsor" />

<title>Krummsy | A blog by a teenager about everything. Technology, travelling, life, school, interesting stuff, the internet, tutorials and more.</title>
</head>

<body>
<div id="wrapper1">
	<div id="header">
    	<div id="logo">
        	<img src="images/logo.gif" alt="logo" />
        </div id="logo">
        <div id="googleads">
        	<img src="images/banner.gif" />
        </div id="googleads">
	</div id="header">
</div id="wrapper1">
<div id="line">
</div id="line">
<div id="wrapper2">
	<div id="intro">
    	Well, this is <span>my</span> blog.<br/>I called it Krummsy.
    </div id="intro">
    <div id="travels">
    My Recent Adventures
    </div id="travels">
    <div id="rightcol">
    	<div id="ads">
        	<img src="images/adsline.gif" /><span>Ads</span><img src="images/adsline.gif" />
            <div class="adboxl">
            Advertise Here
            </div>
            <div class="adboxr">
            Advertise Here
            </div>
            <div class="adboxl">
            Advertise Here
            </div>
            <div class="adboxr">
            Advertise Here
            </div>
            <div class="adboxl">
            Advertise Here
            </div>
            <div class="adboxr">
            Advertise Here
            </div>            
        </div id="ads">
        <div id="friends">
        <img src="images/friendsline.gif" /><span>Friends</span><img src="images/friendsline.gif" />
        </div id="friends">
    </div id="rightcol">
</div id="wrapper2">
</body>
</html>
    Code (markup):
    CSS code:
    @charset "utf-8";
/* CSS Document */

body {
	background-image: url(images/bg.gif);
	background-repeat: repeat;
	text-align: center;
}

@font-face {
	font-family: cambria;
	src: url('fonts/cambria.ttc');
}

#wrapper1 {
	width: 70%;
	margin: 0 auto;
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;

}

#wrapper2 {
	width: 70%;
	margin: 0 auto;
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;
	
}

#header {
	width: auto;
	height: auto;
}

#header #logo {
	float: left;
}

#header #googleads {
	float: right;
	margin-top: 35px;
}

#line {
	width: 100%;
	height: 4px;
	background-image:url(images/line.gif);
	background-repeat: repeat;
	float: left;
	margin-top: 10px;
}

#wrapper2 #intro {
	font-family: cambria, Arial;
	font-size: 48px;
	color: #ffffff;
	float: left;
	margin-top: 10px;
	text-shadow: 0px -1px 0px #4e4e4e;
	width: auto;
}

#wrapper2 #intro span {
	color: #1d91d0;
}

#wrapper2 #travels {
	float: left;
	font-family: cambria, Arial;
	font-size: 24px;
	color: #ffffff;
	margin-top: 10px;
	text-shadow: 0px -1px 0px #4e4e4e;	
}	

#wrapper2 #rightcol {
	float: right;
	width: 33%;
	height: auto;
	margin-top: 10px;
	text-align: center;
}

#wrapper2 #rightcol #ads span {
	margin: 0 7px 0 7px;
	font-family: cambria, Arial;
	font-size: 16pt;
	color: #202020;
}

#wrapper2 #rightcol #ads .adboxl {
	float: left;
	width: 125px;
	height: 125px;
	background-color: #e4e4e4;
	border: 1px solid #8b9390;
	margin-top: 5px;
	line-height: 125px;
	font-family: cambria, Arial;
	color: #a7a7a7;
	font-size: 12pt;
}

#wrapper2 #rightcol #ads .adboxr {
	float: right;
	width: 125px;
	height: 125px;
	background-color: #e4e4e4;
	border: 1px solid #8b9390;
	margin-top: 5px;
	line-height: 125px;
	font-family: cambria, Arial;
	color: #a7a7a7;
	font-size: 12pt;
}

#wrapper2 #rightcol #friends {
	margin-top: 10px;
}

#wrapper2 #rightcol #friends span {
	margin: 0px 7px 0 7px;
	font-family: cambria, Arial;
	font-size: 16pt;
	color: #202020;
}
    Code (markup):
    My CSS and HTML are most likely very poor, but the page seems to display okay apart from this one problem.
     
    Rhysjc, Aug 4, 2010 IP
  2. Rimona

    Rimona Active Member

    Messages:
    123
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    63
    #2
    Can you please show how you want it to look too?
    A simple sketch will do.
     
    Rimona, Aug 4, 2010 IP
  3. Rhysjc

    Rhysjc Peon

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Rhysjc, Aug 4, 2010 IP
  4. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #4
    There are some markup issues as well apart from the few small fixes in the css. As per my understanding (from your sketch) your objective is have 2 column layout. You already have a "rightcol" div which wraps your ad related divs. What I have done is introduced "leftcol" which wraps your content in the left. now in the style sheet I have position these 2 divs relative to each other and floated to left.

    As you wanted the div with "My Recent Adventures" to the bottom of the div (well this is my blog) , remove the property in the stylesheet says "float:left.

    Well I am just pasting my html and css below.
    - I also have removed id/class (selectors) from the closing tags, I don't think they really needed.

    html
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="A blog by a teenager about everything. Technology, travelling, life, school, interesting stuff, the internet, tutorials and more." />
<meta name="keywords" content="blog, technology, travelling, life, school, boredom, bored, internet, tutorials, guides, sharing, pictures, twitter, links, advertise, sponsor" />

<title>Krummsy | A blog by a teenager about everything. Technology, travelling, life, school, interesting stuff, the internet, tutorials and more.</title>
</head>

<body>
<div id="wrapper1">
	<div id="header">
    	<div id="logo">
        	<img src="images/logo.gif" alt="logo" />
        </div>
        <div id="googleads">
        	<img src="images/banner.gif" />
        </div>
	</div>
</div>
<div id="line">
</div>
<div id="wrapper2">
	<div id="leftcol">
		<div id="intro">
    	Well, this is <span>my</span> blog.<br/>I called it Krummsy.
		</div>
		<div id="travels">
		My Recent Adventures
		</div>
	</div>
	<div id="rightcol">
		<div id="ads">
        	<img src="images/adsline.gif" /><span>Ads</span><img src="images/adsline.gif" />
			</br>
            <div class="adboxl">
            Advertise Here
            </div>
            <div class="adboxr">
            Advertise Here
            </div>
            <div class="adboxl">
            Advertise Here
            </div>
            <div class="adboxr">
            Advertise Here
            </div>
            <div class="adboxl">
            Advertise Here
            </div>
            <div class="adboxr">
            Advertise Here
            </div>            
        </div>
        <div id="friends">
        <img src="images/friendsline.gif" /><span>Friends</span><img src="images/friendsline.gif" />
        </div>
    </div>
	<div style="clear:both"></div>
</div>
</body>
</html>
    Code (markup):
    css
    
@charset "utf-8";
/* CSS Document */

body {
	background-image: url(images/bg.gif);
	background-repeat: repeat;
	text-align: center;
}

@font-face {
	font-family: cambria;
	src: url('fonts/cambria.ttc');
}

#wrapper1 {
	width: 70%;
	margin: 0 auto;
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;

}

#wrapper2 {
	width: 70%;
	margin: 0 auto;
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;
	
}

#header {
	width: auto;
	height: auto;
}

#header #logo {
	float: left;
}

#header #googleads {
	float: right;
	margin-top: 35px;
}

#line {
	width: 100%;
	height: 4px;
	background-image:url(images/line.gif);
	background-repeat: repeat;
	float: left;
	margin-top: 10px;
}

#wrapper2 #intro {
	font-family: cambria, Arial;
	font-size: 48px;
	color: #ffffff;
[COLOR="Red"]	/*float: left;*/[/COLOR] <!--remove this-->
	margin-top: 10px;
	text-shadow: 0px -1px 0px #4e4e4e;
	width: auto;
}

#wrapper2 #intro span {
	color: #1d91d0;
}

#wrapper2 #travels {
	float: left;
	font-family: cambria, Arial;
	font-size: 24px;
	color: #ffffff;
	margin-top: 10px;
	text-shadow: 0px -1px 0px #4e4e4e;	
}	
[COLOR="SeaGreen"]#wrapper2 #leftcol {
	width: 60%;
	height: auto;
        margin-right:20px;
	margin-top: 10px;
	text-align: center;
	border:1px solid;
	position:relative;
	float:left;
}[/COLOR]
#wrapper2 #rightcol {
	float: left;
	width: 33%;
	height: auto;
	margin-top: 10px;
	text-align: center;
        position:relative;
}

#wrapper2 #rightcol #ads span {
	margin: 0 7px 0 7px;
	font-family: cambria, Arial;
	font-size: 16pt;
	color: #202020;
}

#wrapper2 #rightcol #ads .adboxl {
	float: left;
	width: 125px;
	height: 125px;
	background-color: #e4e4e4;
	border: 1px solid #8b9390;
	margin-top: 5px;
	line-height: 125px;
	font-family: cambria, Arial;
	color: #a7a7a7;
	font-size: 12pt;
}

#wrapper2 #rightcol #ads .adboxr {
	float: right;
	width: 125px;
	height: 125px;
	background-color: #e4e4e4;
	border: 1px solid #8b9390;
	margin-top: 5px;
	line-height: 125px;
	font-family: cambria, Arial;
	color: #a7a7a7;
	font-size: 12pt;
}

#wrapper2 #rightcol #friends {
	margin-top: 10px;
}

#wrapper2 #rightcol #friends span {
	margin: 0px 7px 0 7px;
	font-family: cambria, Arial;
	font-size: 16pt;
	color: #202020;
}
    Code (markup):
    Hope you get it right.
     
    Last edited: Aug 4, 2010
    radiant_luv, Aug 4, 2010 IP
  5. Rhysjc

    Rhysjc Peon

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks very much for your help. After a little tinkering and some aid from your post, I managed to get it working. As a side point, may I ask you what your views are on the design of the website?
     
    Rhysjc, Aug 4, 2010 IP
  6. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #6
    Glad, that helped.

    I don't see anything to comment yet. Apart from yes it looks like a blog, but as per the design aspect i am yet to know whats the blog about and unless there is some visual graphics available. Good luck. Let us know when you go live.

    Cheers
     
    radiant_luv, Aug 4, 2010 IP