CSS 100% Height Div

Question

Im making a website http://nebkat.com/beta/index.php and there is a grey background and a white background for content(see for yourself). The problem is that I cant set the white part to be 100% height. It only stays up to the title(Welcome...) and then it stops.

Answer 1

Heights specified in % will not be honored by the browser (edit: I mean to say they wont work the way you expect them to).

You need a clearing div inside your <div id="container"> div. Here is where you should place it:

<div id="container">
    <div id="logo">...</div>
    <div id="menu">...</div>
    <div id="content">...</div>
    <!-- HERE -->
    <div style="clear: both;"></div>
</div>

Answer 2

set the height of your #container div to be 100% this should fix the problem (at least it will in firefox 3.6).

You should really install a tool like Firebug for firefox, you can use it to 'live' modify css properties on websites. it makes it really easy to figure out issues like this.

Answer 3

give height as 100% for container div and that would solve your problem.

Answer 4

this answer should be updated with this one: Make div 100% height of browser window

body,html{
    height:100%;
}

#container{
  height:100%
}