Question

I’m wrapping text around an image using markup something like this:

CSS:

#imgAuthor {
    float:left;
    margin: 0 15px 15px 0;
}

HTML:

<h2>Author Information</h2>
<p>
    <img id="imgAuthor" src="..." alt="..." />
    <b>Bob Smith</b>
</p>
<p>
    Here is some bio information about the author...
</p>

This actually looks okay except that, if the text is shorter than the height of the image, my page footer is also wrapped around the image.

I want my footer to appear below the image. If I add <p style="clear:both">&nbsp;</p> to clear the float, then I have too much space above my footer.

How can I clear the float and force any subsequent markup below my image without adding any more whitespace?

Answer 1

Add overflow: hidden to the CSS for the paragraph that contains the floating image. That will make the paragraph grow to fully contain the floated image. For example:

<h2>Author Information</h2>
<p class="inner">
    <img id="imgAuthor" src="http://placekitten.com/200/200">
    <b>Bob Smith</b>
</p>
<p>
    Here is some bio information about the author...
</p>

And:

#imgAuthor {
    float:left;
    margin: 0 15px 15px 0;
}
p.inner {
    overflow: hidden;
}

And a live version: http://jsfiddle.net/ambiguous/S2yZG/

Alternatively, you could stick a <div style="clear: both;"></div> right at the bottom of the paragraph but you should only use this in cases where you need the overflow to be something other than hidden. For example:

<h2>Author Information</h2>
<p>
    <img id="imgAuthor" src="http://placekitten.com/250/200">
    <b>Bob Smith</b>
    <div class="cBoth"></div>
</p>
<p>
    Here is some bio information about the author...
</p>

And:

#imgAuthor {
    float:left;
    margin: 0 15px 15px 0;
}
.cBoth {
    clear: both;
    height: 1px;
}

And a live version of this approach: http://jsfiddle.net/ambiguous/3yGxA/

---

Why does overflow:hidden work? From the CSS3 specification:

The border box of a table, a block-level replaced element, or an element in the normal flow that is a flow root (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same flow as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats […]

Your <p style="overflow: hidden;"> satisfies the third condition so its bounding box is extended below the bottom of the floating image so that there is no overlap.