Search code examples
imageinternet-exploreralignmentcss-floatword-wrap

Floating an image right and left in text box weird spacing in IE


My example is here

The logos look fine when told to align right or left in FF and they seem to wrap properly with the text, but in IE a huge gap shows up after the first line of text.

I have also created float right and left styles and tried to apply to the logos but got the same effect. I know this is an issue in IE, but I haven't found the fix for it yet.


Solution

  • Rather than using the align="left" and align="right" in your HTML, just include float attributes in your floatleft and floatright CSS declarations:

    .floatleft {
        float:left;
        padding: 0px 8px 8px 0px;
    }
    .floatright {
        float: right;
        padding: 0px 0px 8px 8px;
    }