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

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:

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:

Copy
#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 as well, but overflow: hidden works nicely without interfering much.

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

Growing Rails Applications in Practice
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Author of this card:

Avatar
Arne Hartherz
Last edit:
over 1 year ago
by Henning Koch
Attachments:
paja9.png, qx72h5.png
Keywords:
clear
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 makandropedia