Last Updated: February 25, 2016
·
503
· aristretto

force content wrap to respect floated neighbors

Here's the scenario:

You want a clean margin / wrap for content that lives next to a floated element.

Add overflow:hidden to the main (non-floated) content and voilà! Your non-floated content will now respect the edge of the floated content and wrap accordingly.

In the HTML (and pictures) below, div.unit is floated left, while div.item is not floated at all.

HTML
<li class="ingredient">
<div class="unit">175g (6oz)</div>
<div class="item">unsalted butter</div>
</li>

Non-wrapped content (sans overflow:hidden)
Picture

Wrapped content (with overflow:hidden)
Picture

1 Response
Add your response

…and don't forget to set a width for the overflow:hidden element to support the older browsers.

over 1 year ago ·