title: How to have 2 floating divs have the same height
body: <p>I have a wrapper containing an inner wrapper, and that inner wrapper contains 2 floating divs. The left one contains more content than the right one, so it's height is greater than the one on the right. What I am looking for is that both of the containers would have the same height.</p>
  
  <p><a href="http://jsfiddle.net/Kh2Fh/" rel="nofollow">http://jsfiddle.net/Kh2Fh/</a></p>
  
  <p>My html:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="sub-menu"&gt;
          &lt;div id="left-column" class="column"&gt;
              Agenda&lt;/br&gt;
              Here I put some texte                                    
          &lt;/div&gt;
          &lt;div id="right-column" class="column"&gt;
              sdfdsf                          
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>My css:</p>
  
  <pre><code>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;}
  </code></pre>