Wuhtzu Posted November 25, 2009 Share Posted November 25, 2009 Hi all Have a look at this http://wuhtzu.dk/sandbox/forumpost/height100p/test.html The above is a div (#container, red border) holding two other nested divs (#header, green border and #content, blue border). What I want is for the height of #header and #content to sum up to the height of the #container. Right now, as you can see, the #content div is sticking out the bottom of the #container div. How much is it sticking out I hear you ask - it's sticking out what ever #header occupies. So when #header is 200px in height the #content div is sticking out 200px. How can I prevent this (or just obtain the effect I'm after)? I know elements can't know about other heights than their own. So if the window is 900px high at time of rendering, then #container gets height=900px and since #container is the parent of #content, #content too gets height=900px, even though #header occupies some space... But It must be possible to correct this? Applying negative margins and such doesn't seem to have an effect. Thanks guys! <!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> <!-- Title --> <title>100% height test...</title> <!-- Meta information --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- Styles --> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"> <p>HEADER</p> </div> <div id="content"> <p>CONTENT</p> </div> </div> </body> </html> html, body, p, div { margin: 0; padding: 0; } html, body { height: 100%; } #container { width: 600px; height: 100%; border-left: 3px solid #FF0000; border-right: 3px solid #FF0000; margin: auto; background: #FFFFF1; } #header { height: 200px; border-left: 3px solid #00FF00; border-right: 3px solid #00FF00; background: #FFF1FF; } #content { height: 100%; width: 400px; border-left: 3px solid #0000FF; border-right: 3px solid #0000FF; margin-bottom: -200px; margin-left: auto; margin-right: auto; background: #F1FFFF; } Quote Link to comment Share on other sites More sharing options...
haku Posted November 26, 2009 Share Posted November 26, 2009 You aren't wrong, but why are you trying to do this? There may be an alternative solution. Quote Link to comment Share on other sites More sharing options...
Wuhtzu Posted November 26, 2009 Author Share Posted November 26, 2009 I'm trying to do so because in reality the #content div is to be floated left and another div, say #content2, is to be floated right so I have two columns. The columns need to be of different background color, so that's why I need both #content and #content2 to go all the way to the bottom of the page... else the background color of something else (maybe #container, or even body) might be visible through. I have tried alot of things, but since I need the page centered it seem that I need a div to contain all other divs.... Quote Link to comment Share on other sites More sharing options...
haku Posted November 26, 2009 Share Posted November 26, 2009 You can use a combination of two techniques to do what you want. The first, to make columns the same height when they aren't, is faux columns. The other, to make the content fit the height of the page, is a sticky footer. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.