[solved] Text not wrapping float in IE7

I have a floated span followed by some text. In IE7 (and likely 6) the text does not wrap around the floated span. Here’s a screenshot showing IE7 left and Chrome right:

And the test page: http://www.iliveinabin.com/IE7-float-test.htm


A {
DISPLAY: inline-block;
WIDTH: 19em;

DISPLAY: block;
FONT-SIZE: 2.2em;
FLOAT: left;


<A href="#"><SPAN>LO</SPAN>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus commodo pellentesque lacus, id convallis mauris volutpat sit amet</A>

Does anyone know why this happening in IE7 or how to fix it?


I have to ask - why in the world are you coding for IE7? You do know the percentage of people using it, right?

The percentage varies by site. Some of my sites have quite high IE6 usage (lots of visitors from China), others very little.

I feel sorry for you.

I don’t have IE7 but I’m going to guess that the vertical-align is screwing things up for IE7. Try taking that out.

1 Like

Thanks! That does fix it.

This particular problem wasn’t a big issue, since the text is still perfectly readable in IE7. But I do like try and get things looking reasonable if it’s not too much extra work.

1 Like

Glad it works :slight_smile: . I do agree, not a huge issue but still…

I had to rub my eyes and slap myself since I was seeing an IE7 question. Flashback to a few years ago…

1 Like

If you do subsequently need to set to vertical-alignment of that block then just use line-height instead to cure the problem.

a {
    display: inline-block;
    vertical-align: middle;
    width: 19em;
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.