CSS: Why won't the divs go where I tell them?!

tolosenc · 09-08-2011 1:17am #1

Not entirely a n00b to web dev, but CSS is something I've only had limited exposure to. Anyway, doing a template for a web page. The idea is to have 2 100px bars either side, ie

[middle]

. Within [middle], there are three rows, [top] [main] [bottom], top has a banner, bottom has a footer, and main will have the content. [main] is split into 2 columns, [content] [nav].

With the following code, [nav] and

appear immediately underneath where they should be, and I can't see why. All other divs are correctly located.

Any ideas?

<!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>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
			body {
				margin: 0px;
				padding: 0px;
				width: 1200px;
				height: 900 px;
			}
			
			#left {
				width: 100px;
				height: 900px;
				float: left;
				background-image: url(TempLeft.png);
				margin: 0px auto;
			}
			
			#middle {
				width: 1000px;
				height: 900px;
				padding-left: 100px;
			}
			
			#right {
				width: 100px;
				height: 900px;
				float: right;
				background-image: url(TempRight.png);
			}
			
			#top {
				width: 1000px;
				height: 100px;
				background-image: url(TempTop.png);
				margin: 0px auto;
			}
			
			#main {
				width: 1000px;
				height: 700px;
			}
			
			#bottom {
				width: 1000px;
				height: 100px;
				background-image: url(TempBottom.png);
			}
			
			#content {
				height: 700px;
				width: 650px;
				background-image: url(TempContent.png);
			}
			
			#nav {
				height: 700px;
				width: 350px;
				margin: 0 auto;
				float: right;
				background-image: url(TempNav.png);
				
			}

		</style>
		<title>Home</title>
	</head>

	<body>
    	<div id="left"></div>
        <div id="middle">
        	<div id="top"></div>
            <div id="main">
            	<div id="content"></div>
                <div id="nav"></div>
			</div>
            <div id="bottom"></div></div>
        <div id="right"></div>
        
	</body>
</html>

boblong · 09-08-2011 7:57am

Are you going for something like this?

If so, the problem is the order you're presenting your floating divs. Here's the code I used to make the above, with some of the heights and colors changed for debugging, but the idea should be clear enough.

[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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin: 0px;
padding: 0px;
height: 400 px;
}

#left {
width: 100px;
height: 700px;
float: left;
background:#000;
margin: 0px auto;
}

#middle {
width: 1000px;
height: 400px;
padding-left: 100px;
background:red;
}

#right {
width: 100px;
height: 700px;
float: right;
background:#c9c9c9;
}

#top {
width: 1000px;
background:blue;
height: 100px;
background-image: url(TempTop.png);
margin: 0px auto;
}

#main {
width: 1000px;
background:orange;
height: 400px;
}

#bottom {
width: 1000px;
height: 200px;
background:yellow;
}

#content {
height: 400px;
width: 650px;
background-image: url(TempContent.png);
}

#nav {
height: 400px;
width: 350px;
margin: 0 auto;
float: right;
background:green;

}

</style>
<title>Home</title>
</head>

<body>
<div id="right"></div>
<div id="left"></div>
<div id="middle">
<div id="top"></div>
<div id="main">
<div id="nav"></div>
<div id="content"></div>
</div>
<div id="bottom"></div>
</div>

</body>
</html>[/HTML]

tolosenc · 10-08-2011 1:25am

That's exactly what I'm after. Cheers!

COYW · 10-08-2011 8:53am

Newbie to CSS myself and I have always found that absolute positioning is the way to go.

-=al=- · 10-08-2011 2:24pm

yea the floats/margin/padding is where its at, makes it a bit more accessible

Unless you need absolute positioning, relative should be used really

CSS: Why won't the divs go where I tell them?!

Comments