trying to get div to fill all the way down its containing di
Posted: Wed Nov 09, 2011 5:43 am
I'm am trying to align one div at the bottom of another div . However on some pages it sits in the middle on the left. The problem seems to be with the containing div that doesn't stretch down its containing div enough.
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
Here's the relevant css
and the layout is this - (I've simplified.
Thanks in advance
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 -->