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

Question

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;
}

Answer 1

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;
}

Answer 2

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

Answer 3

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;
}