How to have 2 floating divs have the same height
I have a wrapper containing an inner wrapper and this inner wrapper contains 2 floating divs. The left side contains more content than the right side, so the height is greater than the right side. I'm looking for both containers to have the same height.
My html:
<div id="wrapper">
<div id="sub-menu">
<div id="left-column" class="column">
Agenda</br>
Here I put some texte
</div>
<div id="right-column" class="column">
sdfdsf
</div>
</div>
</div>
My css:
body{
background-color:#E5E5E5;}
#wrapper{
background-color:#FFFFFF;
width:800px;
margin-left:auto;
margin-right:auto;
overflow:auto;}
#sub-menu{
margin:10px;
width:780px;
position:relative;
float:left;}
.column{
float:left;
height:100%;}
#left-column{
width:500px;
background-color:yellow;}
#right-column{
width:280px;
background-color:magenta;}
+3
source to share
3 answers
You cannot do this with CSS only using floats, unless you can guarantee the height of each column (which you generally cannot, with a fluid environment like web). However, you have options:
- Usage
display: table-cell
: http://jsfiddle.net/8LdQk/3/ . Unfortunately this won't work in IE6 or 7. This blog post detailing its usage might be helpful. - Using JavaScript: http://jsfiddle.net/8LdQk/5/ .
- Using Dan Cederholm's classics of faux-columns .
+6
source to share
Use a 1-pixel, 500-pixel wide, 280-pixel-wide, high-rise, repeating background image. When one column grows in size, you get the illusion that both columns are the same height.
<div class="backgroundColumn">
<div>
Left column
</div>
<div>
right column
</div>
<div class="clear">
</div>
</div>
0
source to share