Posted almost 6 years ago. Visible to the public. Repeats.

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

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:


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:


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

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

By refactoring problematic code and creating automated tests, makandra can vastly improve the maintainability of your Rails application.

Author of this card:

Arne Hartherz
Last edit:
almost 3 years ago
by Henning Koch
paja9.png, qx72h5.png
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Arne Hartherz to makandra dev