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.

http://jsfiddle.net/Kh2Fh/

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
css position


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


This seems to be the trick for me. Can it be that simple? :)

.column{float:left;height:100px;}

      

-1


source to share







All Articles
Loading...
X
Show
Funny
Dev
Pics