Close Gaps Next to Floated Images in Internet Explorer

By: Zoe Gillenwater

Page 1 of 2

Set for printing

Next

One of the most common tasks when laying out the content of a web page is floating images to the right or left so that text flows around them. This is dead simple to do with CSS:

img {
float: right;
margin: 0 0 1em 1.5em;
}

A problem can arise if the text beside an image is not long enough to wrap around it. In this case, the next image could potentially float up into this space beneath the text, instead of sitting directly beneath the previous floated image. Once again, this is simple to fix:

img {
float: right;
clear: right;
margin: 0 0 1em 1.5em;
}

The addition of the clear to the floated image ensures that each one will always sit below the previous one. However, placing the float and clear properties on the same element can cause large gaps to appear in Internet Explorer (IE) — gaps that take more complicated CSS to fix than what we've used so far.

To see the problem, download the support files for this article and open IE_adjacent_float_gap.html in Dreamweaver. Preview it in IE. Unless you have a very narrow screen so that the text of the first paragraph is long enough to wrap around the first image, what you will see should resemble Image 1.


Image 1

What seems to be happening is this: IE floats the first image to the right. The text of the paragraph that follows it wraps around it. Next up in the XHTML source is the second image, which is also floated to the right and cleared below the first image. But instead of allowing the text that follows the second image to flow up beside the first image, as it ought to, the text acts as if it, too, had a clear applied to it.

When an IE bug is present, the first line of defense is to see if it falls to either of the two "magic bullets" described in How To Attack An Internet Explorer (Win) Display Bug by Holly Bergevin and John Gallant. I'll save you some trouble — this one doesn't. No matter which elements you apply position: relative or height: 1% to, the gap remains.

What to do now? Georg Sørtun, a helpful and inventive member of css-discuss, came up with the idea to make the content adjacent to the floats inline. For some reason, perhaps because the clear property can only be applied to block-level elements, the content no longer acts like it is inheriting the clear, and the gap is gone.

Go to the Code View of IE_adjacent_float_gap.html. Add the conditional comment block below that includes special styles for IE only to the head of the document, below the closing style tag.

In a real page, the styles for all browsers would be placed in one style sheet, which would be linked or imported from the head of the page, while the styles for IE would be linked or imported from within the conditional comments. Here, the styles are listed within the head of the page itself for your ease of editing.

<!--[if IE]>
<style type="text/css">
p {
display: inline;
}
</style>
<![endif]-->

If you preview in IE after adding the above code, you will see that the gap is now gone. Of course, since the paragraphs are all inline now, they all run together as one big lump of text. This is even worse than before!


Image 2: The gap is gone, but all of the paragraphs are run together.

Page 1 of 2 1 2 Next


download
Download Support Files


Keywords
CSS, cascading style sheets, stylesheets, Windows Internet Explorer, IE, float, floats, floated image, clear, gaps, bugs, hacks, hasLayout, zoom, inline