Can't float image to the right of text in IE 6

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).

In Firefox: Centered text with image floated to right side of div In IE6: Centered text with image to the left of text.

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.

HTML

<div id="growl">
   <img src="close.gif" class="action" title="hide" />
   <span class="text">Grrrrrr.......</span>
</div>

In css:

#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 > .text {
    font-size:120%;
    font-weight:bold;
}

#growl > .action {
    float:right;
    cursor:pointer;
}

From stackoverflow

• The > selector does not work on IE 6.

  Just get rid of it:

  #growl .text {
      font-size:120%;
      font-weight:bold;
  }
  
  #growl .action {
      float:right;
      cursor:pointer;
  }
  

• The > css selectors are not supported by IE6, try just removing them.

• No point in adding a class to each elements in the div when you only have one img and span. Do this instead for cleaner code.

  <div id="growl">
     <img src="close.gif" title="hide" />
     <span>Grrrrrr.......</span>
  </div>
  

  -

  #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 span {
      font-size:120%;
      font-weight:bold;
  }
  
  #growl img {
      float:right;
      cursor:pointer;
  }
  

  slolife : Code was clipped for the post and still in dev. But that's a good point.