Posted about 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.

Does your version of Ruby on Rails still receive security updates?
Rails LTS provides security patches for old versions of Ruby on Rails (3.2 and 2.3).

Owner of this card:

Avatar
Arne Hartherz
Last edit:
17 days 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