Page 1 of 1

trying to get div to fill all the way down its containing di

Posted: Wed Nov 09, 2011 5:43 am
by deejay
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 !

Image

Any ideas on it are gratefully received :) Here's the relevant css

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;
	}

and the layout is this - (I've simplified.

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 -->
Thanks in advance

Re: trying to get div to fill all the way down its containin

Posted: Wed Nov 09, 2011 6:24 am
by gully_mi_seh
the problem is in the float directive. For the #leftmenu you put float:left and for the #main float: right. I suggest to remove the float:right in the #main and to replace it by clear:both . So give it a try and let me know .

Re: trying to get div to fill all the way down its containin

Posted: Wed Nov 09, 2011 11:59 am
by deejay
Hi Gully

Thanks for the reply.

I've tried different combinations of the float as mentioned. I can change the float to left in #main and it'll still display as I want it , however if I get rid or change to 'clear:both' then the #main div will sit under my #leftcolumn div. which is not what I want!

Re: trying to get div to fill all the way down its containin

Posted: Mon Nov 14, 2011 3:28 pm
by tech0925
Have you tried simply adding clear both under the #main div? Make a css class called:

.breaker {
clear: both;
}

Then insert <div class="breaker"></div> under the last column (#main)

Maybe this will help...