How to put text next to an image in IE6 using MVC 3

Question

I'm hoping someone will have the answer to this as I have been tearing my hair out for a day now.

All I am trying to do is position some text next to an image. Whichever method I try, IE6 resolutely refuses to render it properly.

This is the HTML/Razor:

<div class='prod-img'>
    <img src="@Url.Content("~/Content/ButtonImages/BackButton.bmp")" onclick="Quit()"/>
</div>

<div class='prod-text'>       
    <p>Something here</p>
</div>

And this is the CSS:

.prod-img
{
    position: relative;  
    top: .8em;
    left: .1em;    
}

.prod-text
{
    position: absolute;
    left: 5em;
    top: .75em;   
}

For some reason, IE6 stuffs the text below the image instead of next to it.

Answer 1

Floating left seems to do the trick in IE6:

.prod-img
{
    float: left; 
}

.prod-text
{
   margin-left: 10px;    
}

JS FIddle here: http://jsfiddle.net/qSExE/4/

If this doesn't work with your full code then I would hazard a guess that there isn't enough horizontal space to fit the text, so it is dropping below the image (float drop)?