Posted almost 8 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:

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

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Owner of this card:

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