Reference: CSS image too tall for its text

A technical note-to-self on a problem that I’ve run into a few times. Sometimes when setting up webpages, one wants to have a box with some kind of graphic floated to the side of some text. Because the graphic is floated, it apparently doesn’t affect the height of the whole box, so if the text is too short, the box is shorter than the graphic and looks terrible.

The solution — or, a solution that at least works in Firefox — is to add an empty element with its CSS “clear” property set to “both” at the bottom of the box. The “clear” property forces the element to be laid out below any floats, which extends the height of the non-floating material to be sufficiently tall. This is easy to do with:

<div style="clear: both;"></div>

after the text and image elements.

Questions or comments? For better or worse this website isn’t interactive, so send me an email or, uh, Toot me.

To get notified of new posts, try subscribing to my lightweight newsletter or my RSS/Atom feed. No thirsty influencering — you get alerts about what I’m writing; I get warm fuzzies from knowing that someone’s reading!

Earlier: Whiteboard Videos

See a list of all posts.

View the revision history of this page.