HTML/CSS Layout Help Please?

T

Tyler

New member
Hello. I have a #wrapper, #header, and a #navigation_background. I want the header to go on top of the pages, then the navigation_background to go under it. Then have main content right under that.

For some reason the navigation background is going to the top. I am trying to use float: top and float:top which should make it float side by side in the order I type it, but it is not working. Please help me :D

body {
background-color: white;

}

#wrapper {
background-color: black;
margin-top: 10px;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;
border: 5px outset #333;
width: 65%;
height: 1000px;
}


#header {
background-color: #666;
float: top;
width: 100%;
height: 200px;
border-bottom: 3px solid #333;

}

#navigation_background {
background-color: #33CC00;
float: top;
width: 100%;
height: 40px;
border-bottom: 3px solid #333;
}

___________________________________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Depetrify...Welcome!</title>
<link rel="stylesheet" href="style5.css" type="text/css" />
</head>

<body>
<div id="wrapper" div;>
<div id="header">
<div id="navigation_background";>


</div>
</div>
</div>


</body>
</html>
Thankyou Nisovin. That worked great :-). I have no idea how though lawl. I will probably be spamming these questions, so I look forward to meeting you again. O.o
 
The float CSS modifier does not do what you seem to think it does. Your problem here is that you're nesting all of your divs, so the innermost one is going to sit at the top of its parent, no matter what. Your best option is to made the two divs side by side in the markup, like so:

<div id="wrapper">
<div id="header">
</div>
<div id="navigation_background">
</div>
</div>

This means you can remove the floats.

You could also add a padding-top to the header, which would force the navigation_background down. However, if you are planning to add text at all to this page, you'll want to go with the method above.
 
Back
Top