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

Consider this HTML:

Copy<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:

Copy#actions { float: left; }

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

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:

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

Now it's pretty:

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.