title: Make floating divs the same height
body: <p>I have 2 divs side by side. I don't know the height of them upfront, it changed according to the content. Is there a way to make sure they will always be the same height, even when one of them stretches, only with CSS?</p>
  
  <p>I made a fiddle to show. I want the red and blue divs to be the same height...</p>
  
  <p><a href="http://jsfiddle.net/7RVh4/">http://jsfiddle.net/7RVh4/</a></p>
  
  <p>this is the css:</p>
  
  <pre><code>#wrapper {
  width: 300px;
  }
  #left {
      width:50px;
      background: blue;
      float:left;
      height: 100%;  /* sadly, this doesn't work... */
  }
  #right {
      width:250px;
      background: red;
      float:left;
  }
  </code></pre>