Posted over 7 years ago. Visible to the public. Linked content. Deprecated.

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

We use flexbox for this use case now.

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.

Owner of this card:

Avatar
Arne Hartherz
Last edit:
5 months ago
by Besprechungs-PC
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 makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more