title: CSS Parent-Child height
body: <p>I have some problem with these code snippets:</p>
  
  <p>CSS:</p>
  
  <pre><code>#wrapper{
      width: 600px;
      background: gray;
  }
  
  #left{
      float: left;
      width: 150px;
      height: 80px;
      background: red;
  }
  
  #right{
      float: left;
      width: 450px;
      height: 150px;
      background: yellow;
  }
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="left"&gt;&lt;/div&gt;
      &lt;div id="right"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Left's height is 80px, and right's height is 150px. I would like this thing to appear like this:
  <a href="http://img408.imageshack.us/img408/9978/dream.th.jpg" rel="nofollow noreferrer">http://img408.imageshack.us/img408/9978/dream.th.jpg</a>
  The above screenshot from IE, when I use IE these snippets work perfectly. But when I use other browser (opera, FF, Safari, Chrome), I get this:
  <a href="http://img408.imageshack.us/img408/869/fact.th.jpg" rel="nofollow noreferrer">http://img408.imageshack.us/img408/869/fact.th.jpg</a></p>
  
  <p>This is not cool… I want the parent (#wrapper) element's height to get the bigger height of the two children.</p>