css layout; div's height=100%

[rathers]

Hi All,

I'm having trouble with layout using css. I have 2 divs (the left and right margin) which I have specified to have "height: 100%. They do not stretch to the bottom of the page. I don't think this is a resize/reload issue (which I already read a thread on). Can anyone help?

#masthead{
padding: 10px 0px 0px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
height: 60px;
}

#navBar{
height: inherit;
float: left;
width: 180px;
margin: 0px;
padding: 0px;
background-color: #eeeeee;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

#headlines{ /* right column*/
height: inherit;
float:right;
width: 180px;
border-left: 1px solid #cccccc;
/*border-bottom: 1px solid #cccccc;*/
padding-right: 10px;
}

#content{
padding: 20px 0 0 0;
float: left;
width: 55%;
height: 100%;

}

and the page can be seen at

http://206.176.226.214/~jwilson/new_vista_site.htm

any help would be greatly appreciated. I didn;t read the rules for this forum so I apologize for any issues regarding the thread. Thanks again.

 

[cLFlaVA]

100% height is only VALID when the element with 100% height is within an element that has static (explicitly set) height.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Vragabond]

height: 100%; does not exist and reverts to height: auto; if parent element does not have specifically defined height )i.e. in pixels). This problem has been discussed ad nauseum on this forums. There is a javascript solution to that mentioned around 100 times.

 

[cLFlaVA]

I found this thread by typing in a very difficult search of "100% height javascript": thread215-944535

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[rathers]

thanks for still helping while flaming. I did read a couple of those threads, but got confused as to the parent element. thanks again - hey team, good ideas!!

 

[cLFlaVA]

you'd just need to add a div around the entire contents. that would be the parent element.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]