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

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.

Author of this card:

Avatar
Arne Hartherz
Last edit:
about 2 years 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