How to make same height of 3 div floating next to each other ? - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

How to make same height of 3 div floating next to each other ?

jawaidgadiwala

9:34 am on Jun 3, 2010 (gmt 0)

10+ Year Member

I have 3 column page. each column content is in a div. And 3 Divs are LEFT, CONTENT, RIGHT floating next to each other. I want to make the same height of these 3 divs. so that when the content comes in CONTENT div and its size increases then the height of all 3 divs remain same.

And the second thing i am trying to do is to float the the div BOT on the bottom of its parent div LEFT.

Thanks.


<html>
<head>

<style type="text/css">
#main{
width:500px;
position:relative;
}

#left{
float:left;
background-color:#0000FF;
width:100px;
min-height:100px;
}

#content{
float:left;
background-color:#00FF33;
width:300px;
}

#right{
float:right;
background-color:#0000FF;
width:100px;
min-height:100px;
}

#bot{
width:100%;
height:50px;
background-color:#FF0000;
}

</style>
</head>

<body>
<div id="main">
 <div id="left">
 <div id="bot">
  </div>
 </div>
 
 <div id="content">
  asdasda<br/><br/><br/><br/><br/><br/><br/>
  asdasda<br/>asdasda<br/>asdasda<br/><br/><br/><br/><br/><br/><br/>
  asdasda<br/>asdasda<br/><br/><br/><br/><br/><br/><br/>asdasda<br/>
  asdasda<br/>asdasda<br/>asdasda<br/>asdasda<br/>asdasda<br/> 
</div>
 
<div id="right">
</div>
</div>
</body>
</html>

Major_Payne

4:59 pm on Jun 3, 2010 (gmt 0)

Expanding the content div pass the min-height set for the left/right div is easily done as divs expand on content. But, to get the left/right divs to increase their height as the content div's height increases is not going to happen as their content is set at 100px and will not expand until you add content to them.

Usually the page is set up to not need this requirement of 3 divs expanding together as it should be style to a set width/height according to the expected center content for each page. Makes all pages look good when going from one to the other and having only the center content vary in length.

Maybe the CSS property "overflow" may help you.

Ron

Furiat

7:53 pm on Jun 3, 2010 (gmt 0)

10+ Year Member

This is a BAD suggestion, but you could get rid of floats, use display:tableon #main and display:table-cell on the inner divs. But that will fail in IE most probably. Actually you're better off with tables. I'm an orthodox concerning table use, but there's 2 rules to layouts:
1. Every layout is a hack.
2. If all hacks fail - hack with tables.

Those 2 rules always did the trick for me. And I only had to resort to rule #2 only in one extreme case, albeit it also involved "setting a block's dimention based on a sibling block's dimention".

kas187

8:32 am on Jun 6, 2010 (gmt 0)

10+ Year Member

By default divs will fit to contain the content. Why do you need to have all the columns at equal heights? What are you trying to achieve? Have you look into the faux column effect? If you need to heights set for a specific reason then although you have two suggestions, already I personally feel that markup and css should be kept as simple as possible. By very nature of how divs behave, content will always dictate the height and width. I have two possible suggestions for you:

1. Use a generic class on all three divs which would have a min-height value. This is a fixed value set in css.
2. Use JS to loop through each 3 divs, isolate the one which has the tallest height and assign that value to the other two divs. For this you can use the Math.max() method to achieve that

jawaidgadiwala

3:34 pm on Jun 6, 2010 (gmt 0)

10+ Year Member

thanks for everyone. problem is resolved. i just used tables as Furiat told... I just liked your two rules :P