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

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
deejay
Forum Contributor
Posts: 201
Joined: Wed Jan 22, 2003 3:33 am
Location: Cornwall

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

Post 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
gully_mi_seh
Forum Newbie
Posts: 14
Joined: Fri Mar 18, 2011 8:48 pm

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

Post 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 .
User avatar
deejay
Forum Contributor
Posts: 201
Joined: Wed Jan 22, 2003 3:33 am
Location: Cornwall

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

Post 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!
tech0925
Forum Commoner
Posts: 47
Joined: Wed Nov 09, 2011 2:46 pm

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

Post 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...
Post Reply