Why? CSS: 100% height inheritance problem

programming web dev
1

I am new to css and web design so bear with me. I was told CSS is the way to go, but man there sure is a lack of consistent support between browsers… anyway - to my question…

I have a static width centered 2 columns with a header layout. As you can see I have the parent divs at 100% height. I found this from a tutorial. Now any div within my #container div should be 100% of the viewport.

So I want my #nav div and #main div to take up 100% of view port regardless of how much content. The divs should always be the same height, right? Well - I am missing something because take a look at the following links on my site.

www.texasriptide.org - this home page should be 100%, but infact it is greater that 100% for some reason ( notice the scroll bar, but no content )

www.texasriptide.org/aboutus.php - this page, the #main div is taller than the #nav div and I cant figure out why this is…

Please offer suggestions!!! Thank you!!!


html { 
   height:100%; 
} 
body { 
   text-align:center; 
   margin: 0px 0px 0px 0px; 
   padding: 0px 0px 0px 0px; 
   height:100%; 
} 
#container { 
   width:780px; 
   margin-right:auto; 
   margin-left:auto; 
   margin-top:0px; 
   top:0px; 
   padding:0px; 
   text-align:left; 
   font-family:Verdana, Arial, Helvetica, sans-serif; 
   font-size:10px; 
   height:100%; 
} 
#nav { 
   width: 179px; 
   float: left; 
   background: #ccc; 
   background-image: url(../images/left.jpg); 
   background-repeat: repeat-y; 
   border-right:1px solid #000; 
   height:100%; 
} 
#main { 
   width:600px; 
   float:left; 
   background:#fff; 
   height:100%; 
}

**testing results differ with firefox and IE,

firefox just stops the main div short and the text just overflows on aboutus.php.

where as IE shows all the text in the div but the nav and main divs are not lined up.

2

Hmm… try reading this.
http://www.webmasterworld.com/forum83/200.htm

I was just about to tell you to add “body {height: 100%}” but you have it already. Maybe you’ll find something more useful there, I just skimmed it over in a couple of seconds.

3

Thanks hifi,

I found that link when I started looking into CSS layouts with 100% height. And that solution works if there is no header or footer.

So what happens when you have a header is the following: The header height is not taken into account when the heights of the child divs are assigned.

For example, take a look at my site in progress www.texasriptide.org and notice the header image with a red border on the bottom. Now scroll down to the bottom of the page. You will notice that the content below the header is exactly 100% of the viewport. Resize the browser window and notice you get the same results. Does that make any sense? I feel like I muddled that explanation a bit.

Does any one know a way around this?? THANKS!!