I have the following HTML
<div> <img id='image1' src='http://valleywag.com/assets/resources/2008/03/BlackGoogleLogo.jpg' alt='Why doesn't this float correcly?' style='border-width: 0px; float: left;' /> <div id='divText' style='font-family: Arial, Helvetica, sans-serif; font-size: 11px;' class='txt-Normal'> <div style='background-color: Green; color: White;'> <p> <strong><span style='font-size: xx-large;'>This is going to be big title</span></strong> </p> <ul> <li> <span style='font-size: small;'>Foo</span> </li> <li> <span style='font-size: small;'>Bar</span> </li> <li> <span style='font-size: small;'>FooBar</span> </li> <li> <span style='font-size: small;'>BarFoo</span> </li> </ul> </div> </div> </div>
The text does not float around the image. It does not matter whether the browser IE or Firefox.
How can I fix this to float around the image?
The text does float around the image for me in IE6 and FireFox2. Is there any CSS that you’re leaving out for us to test?
Here is what I see:
Example 1 http://img214.imageshack.us/img214/6906/ff2topie6bottomhz5.gif
The HTML example you provided is in an HTML document right? If so, what doctype are you using?
If you are trying to make all of the text line up with the right side of the image, you may need to float your text’s container left as well. That will produce an output like this:
Both Elements Floated http://img518.imageshack.us/img518/4619/bothfloatedsd7.gif
You can do this by modifying your code like this: