October 4, 200718 yr Hey decided to stop using tables and get with the program, but have hit a hurdle thats becoming annoying. My layout is basically a header middle image and the main content all within a #container, the header and middle image are fixed height and I want the content to fill the rest of the space, but can't get it to fill in what space is missing, it just runs off the bottom of the page and creates a massive content section. I have made a more basic version of my page as not to confuse, blue box is header, brown is midImage, green is container and yellow is content. My CSS Code: body, html { height:100%; } body { margin:0px; padding:0px; text-align:center; } #container { margin:0px auto; padding:0px; width:750px; background-color:#006633; height:auto; min-height:100%; height:100%; } #header { margin:0px; padding:0px; height:165px; background-color:#003399; } #midImage { margin:8px 0 0 0; padding:0px; height:220px; background-color:#993300; } #content { width:750px; margin:8px 0 0 0; padding:0px; background-color:#CCCC00; height:100%; } My HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <link href="test.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id="header"></div> <div id="midImage"></div> <div id="content"></div> </div> </body> </html> Here is a live link to show what it is doing as you can see the yellow box is going off the screen at the bottom instead of just filling the rest of the page up. http://www.creativgroup.com/cpartnership/n...esttemplate.htm I have also attached a jpg to show you how I intend it to look. Any help would be fantastic, I have searched the web and many forums but so far have not come up with a solution?
October 4, 200718 yr with the standard box model, when you put "height: 100%", it actually means "height = full browser window height", rather than just "remaining pixels above the fold". If you want to do just to the bottom of the scroll area, do sometihng like: "position: relative; bottom: 0;"
October 4, 200718 yr Author I have changed the #content to #content { position:relative; bottom:0px; width:750px; margin:8px 0 0 0; padding:0px; background-color:#CCCC55; } but that does not set the height of the box it just sends it to the bottom and I have to define the height still.
October 4, 200718 yr Author Sorted changed design a bit and used the #container to hold the gradient and floated the left menu and main copy left and right. http://www.creativgroup.com/cpartnership/
October 4, 200718 yr Author Tell a lie that has not worked its 100% off the browser window but if content goes out the bottom the container will not go with it.
Create an account or sign in to comment