title: Floating div's in Chrome, appearing out of position
body: <p>I'm having a problem getting three items to float in Chrome. Basically, it's an image on the left, with two divs floated on the right. 
  Problem is the rigght-floated dives are dropping down to the bottom of the image. Is this a known issue in Chrome and how can I fix it? Seems okay in IE, Opera, Safari &amp; Firefox...</p>
  
  <p>This is the code:</p>
  
  <pre><code>    &lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div id="header"&gt;
              &lt;img src="image1.gif" width="320" alt="Logo"/&gt;
              &lt;div id="social"&gt;
                  &lt;img src="images/facebook_logo.png" alt="Facebook logo" width="25" /&gt;
                  &lt;img src="images/twitter.png" alt="Twitter logo" width="25" /&gt;
              &lt;/div&gt;
  
              &lt;div id="review"&gt;
          &lt;img src="roundel1.gif" alt="Click here!" style="float:left; width:50px;"/&gt;&lt;div&gt;
                      FREE service!
                  &lt;/div&gt;
              &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and the CSS:</p>
  
  <pre><code>* {
    margin:0;
    padding:0;
  }
  
  body    {
      background-image:url(../images/greenbg.png);
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size:120%;
      }
  #container           {
      margin-left:auto; 
      margin-right:auto; 
      width:960px;
      background-color:#FFF;
  }
  #header {
      height:100px;
  }
  #header-image   {
      float:left;
  }
  /* flyout boxes */
  
  #review {
      float:right;
      width:216px;
      border-style:solid;
      border-width:2px;
      height:63px;
      margin-right:20px;
  }
  #social {
      float:right;
      width:136px;
      border-style:solid;
      border-width:2px;
      height:48px;
      }
  </code></pre>