I need help for coding a simple 1 column layout that looks like this: I was looking at something like this: <!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> <title></title> <link rel="stylesheet" type="text/css" href="#.css"/> </head> <body> <div id = "wrap"> <div id = "header"> </div> <div> The navbar code I've already created would go here </div> <div id="content"> </div> </div> </body> </html> Code (markup): but when I tried coding the CSS, the whole thing screwed up. So really I just need help with the CSS code, I guess. I need it to do exactly as the picture shows. A container that contains it all (most likely) with... A header at the top, then the navbar code, then the content where the content stretches to the bottom of the screen on any resolution and the border follows the outside of the container all the way down. When I tried coding the CSS, what would happen was that the content would go 220px past the bottom of my page, the size of my header + navbar together, and wouldn't have a border on it. I need it to stop at the bottom with the border going all the way down. If someone can just type up the small bit of CSS & HTML I require, I'd appreciate it. I'll throw in $5 PayPal if you want... Thanks
Try this: <html> <head> <title>Title</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"/> </head> <body> <div id="wrapper"> <div id="header">Header</div> <div id="navbar">Navbar</div> <div id="content">Content</div> </div> </body> </html> Code (markup): body { border: #000 solid 5px; margin: 0; padding: 0; text-align: center; } #wrapper { background-color: #aaa; margin: 0 auto; } #header { background-color: #ccc; float: left; height: 100px; width: 100%; } #navbar { background-color: #0f0; float: left; height: 50px; width: 100%; } #content { background-color: #eee; height: 100%; width: 100%; } Code (markup):
So if the content were only to be 800px wide, I should just change that 100% to 800px right? I'll go test this out now.
Unfortunately, the container still continued past the bottom of the page, and when I added more content, the container did not continue with it, and the content went outside of the designated box. Here is an image of what I need it to look like. Not shown in that picture but, the width of the header/navbar/content needs to be 800px. Edit: #
OK, this works in Firefox, but the border is creating a small gap at the bottom. I just don't know how to get rid of it <html> <head> <title>Title</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"/> </head> <body> <div id="wrapper"> <div id="border"> <div id="header">Header</div> <div id="navbar">Navbar</div> <div id="content">Content</div> </div> </div> </body> </html> Code (markup): * { margin: 0; padding: 0; border: 0; } body { background-color: #00f; text-align: center; } #wrapper { background-color: #eee; height: 100%; margin: 0 auto; width: 800px; } #border { border: #000 solid 5px; min-height: 100%; } #header { background-color: #f00; float: left; height: 100px; width: 100%; } #navbar { background-color: #0f0; float: left; height: 50px; width: 100%; } #content { background-color: #eee; } Code (markup):
Have you solved the problem yet ? I can hlep. But I can't see the picture because you didn't attach it here. General speaking, the height is not fixed height. So your requirement is easy to fulfilled. (the border follows the outside of the container all the way down.)
The image of what I need is located here if you couldn't see it: http://img159.imageshack.us/img159/1489/sitesamplenn1.png Cash, *Actually in IE, with the exact code you gave me, the border isn't wide enough to contain the page even though it should be according to the code, and if I add width=100% to it, then it won't work in Firefox. For future references, I don't need a bottom or top border.
<!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=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css" media="screen"> html, body { height: 100%; margin: 0px auto; } * html #content { height:100% /*Because min-height won't work in IE6 and less*/ } #content { min-height: 100%; margin: 0px auto; border-left: 5px solid orange; border-right: 5px solid orange; width: 800px; background-color: #006699; font-size: 28px; text-align: center; } #header { height: 180px; width: 100%; background: red; color: yellow; } #nav { height: 40px; width: 100%; background: pink; } </style> </head> <body> <div id="content"> <div id="header">Header</div> <div id="nav">Navigation</div> Content Goes Here </div> </body> </html> Code (markup):
Thanks wd, your code works perfectly in both main browsers. Not sure if you or anyone else saw, but I was offering a $5 reward so leave your PayPal here if by any chance you return.