title: Can't float image to the right of text in IE 6
body: <p>I am trying to create a little growl like div for a site.  It works great in Firefox, but not IE6 (haven't tried IE7, but I still need to support IE6).</p>
  
  <p>In Firefox: Centered text with image floated to right side of div
  In IE6: Centered text with image to the left of text.</p>
  
  <p>I've tried switching the img and span tag order, but that causes a line break in FF between the two, and IE renders the image on the right of the text, but not docked to the right side of the div.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="growl"&gt;
     &lt;img src="close.gif" class="action" title="hide" /&gt;
     &lt;span class="text"&gt;Grrrrrr.......&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In css:</p>
  
  <pre><code>#growl {
      background-color:yellow;
      text-align:center;
      position:absolute;
      top:0; left:0;
      width:98%;
      padding:10px 0;
      margin-left:1%;
      z-index:10;
      border:1px solid #CCCCCC;
  }
  
  #growl &gt; .text {
      font-size:120%;
      font-weight:bold;
  }
  
  #growl &gt; .action {
      float:right;
      cursor:pointer;
  }
  </code></pre>