Use "overflow: hidden" to avoid floating elements from wrapping a container's text

Updated . Posted . Visible to the public. Deprecated.

We use flexbox for this use case now.

Consider this HTML:

<div id="container">
  <div id="actions">
    <a href="#">Click me!</a>
  </div>
  <div id="content">
    Hello Universe! Hello Universe! Hello Universe! Hello Universe! Hello Universe! Hello Universe!
  </div>
</div>

If you want the actions element to float on the left, you'd just say this in your CSS:

#actions { float: left; }

Unfortunately, any content of the content's text will wrap underneath it:

paja9.png

If you don't want that but actually wish for longer text to stay on the same vertical boundaries, use overflow: hidden on the element whose content you don't want to see wrapping:

#actions { float: left; }
#content { overflow: hidden; }

Now it's pretty:

qx72h5.png

The reason behind this is that "overflow: hidden" will give you a new block formatting context. You could use other attributes Show archive.org snapshot as well, but overflow: hidden works nicely without interfering much.

Follow the attached link for a (more verbose) example.

Arne Hartherz
Last edit
Henning Koch
Attachments
Keywords
clear
License
Source code in this card is licensed under the MIT License.
Posted by Arne Hartherz to makandra dev (2012-06-19 09:28)