Expend Div to 100% in FF and IE

Expend Div Tag to bottom of its container height

[borisz]

Hello everyone,

I just need advice, here is an site Im working no

[stream-tek.com...]

now the green navigation on left side needs to expend to the bottom of its main container with borders (expend in height). I did made it work in Google Chrome and Safari but it does not work in FF and IE. This is CSS for that left navigation:

.GreenLeftNavStyle {
float: left;
width: 174px;
margin-left: 5px;
margin-top: 5px;
margin-bottom: 8px;
padding-top: 25px;
padding-bottom: 20px;
height: 100%;
max-height: 100%;
overflow: auto;
background-color: #94BB84;
background-image: url(images/NewNavImg/LongBodyNavShadow.png);
background-repeat: repeat-y;
background-position: right top;
}

so is there any way I can make it work in Firefox and Internet Explorer (expend to bottom) as in Chrome and Safari?

Thanks for help

[caffinated]

One way might be to make the green background part of the background of the contentbody class instead of the GreenLeftNavStyle class. Then float your menu content on to that background instead, perhaps?

I recommend converting the tables to divs tho, seriously.

[Major_Payne]

Must set a definite height. A 100% height doesn't work in a lot of browsers:

.GreenLeftNavStyle {
float: left;
width: 174px;
height: YYYpx;
margin: 5px 0 8px 5px;
margin-bottom: 8px;
padding-top: 25px;
padding-bottom: 20px;
overflow: auto;
background: #94bb84 url(images/NewNavImg/LongBodyNavShadow.png) repeat-y right top scroll;
}

[caffinated]

I see you had some success borisz. To tidy this up a little, I would recommnd you at add footer section to the main content area which contains a nicely finished bottom border to the green strip. If you use this footer just before you close the .contentbodygreen table, with a cleared float, this will also mean that pages containing less content height than the nav area will still stretch the .contentbodygreen to the height of your nav. In other words, the page height will always stretch to the larger of the two.

So the html would be something like:

<div class=contentBodyFoot></div>

and the css would be like:

.contentBodyFoot {
clear:both;
display:block;
width:100%;
height:10px;
background:transparent url(content_footer.jpg) no-repeat;
}

Note: you have to clear:both because your maincontent is floated right.

Also, as far as I can see, you can now remove all of the background spec, 'height' and 'max-height' from your greenLeftNavStyle. Does this not also suggest that you can simply have NavStyle as a generic nav which sits on all colours of contentbody(whatevercolour)? I think perhaps yes.

[caffinated]

err quick correction
<div class="contentBodyFoot"></div>

missed the "", sorry.

[borisz]

thanks all for help, problem fixed :)