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
Show archive.org snapshot
as well, but overflow: hidden works nicely without interfering much.
Follow the attached link for a (more verbose) example.
Posted by Arne Hartherz to makandra dev (2012-06-19 09:28)