to fix this I've tried adding the css
max-height: 100%;
min-height: 100%;
to the containing div, but it doesn't seem to work. Sure I can force the height of the leftmenu div to the size of the page but this isn't good enough as it needs to be dynamic depending on the content on each page.
Here's a pic of the leftmenu div highlighted. You can see it doesn't fill the height of its container !

Any ideas on it are gratefully received
Code: Select all
.container {border: 1px solid #333333;
margin: 40px auto;
width: 950px;
}
div#leftmenu {
width: 225px;
float: left;
position: relative;
}
div#companyinfo {
bottom: 0;
font-family: Lucida Sans Unicode,Lucida Grande,sans-serif;
margin-left: 20px;
margin-right: 20px;
position: static;
}
div#banner2 {
min-height: 80%;
max-height:80%
}
div#main {
float: right;
width: 675px;
}
Code: Select all
<div class="container">
<div id="leftmenu">
<div id="banner2">
</div>
<div id="companyinfo ">
</div>
</div><!-- end left menu -->
<div id="main">
</div><!-- end main -->
</div><!-- end container -->