Read more

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

Arne Hartherz
June 19, 2012Software engineer at makandra GmbH

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>
Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

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.

Posted by Arne Hartherz to makandra dev (2012-06-19 11:28)