Posted almost 9 years ago. Visible to the public. Linked content. Deprecated.

Prevent floating sibling elements from wrapping in CSS

Flexbox is available in all important browsers. Use it.

When you style multiple adjacent block elements with float: left, they will be rendered next to each other similar to inline elements. Also like inline elements, they will wrap at the horizontal end of the parent container.

If you want to keep floating elements from wrapping, nest them in a really wide container:

<div class="tabs"> <div class="really_wide_container"> <div class="tab">...</div> <div class="tab">...</div> <div class="tab">...</div> </div> </div>

This is the Sass that goes with it:

.tabs height: 20px overflow: hidden .really_wide_container width: 1000px .tab float: left

Note that you shouldn't go crazy and give .really_wide_container a ridiculously long width like 100000px. Browser will still render this area internally, even though it is not visible.

Check out the attached link for other workarounds.

makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.

Owner of this card:

Henning Koch
Last edit:
over 1 year ago
by Henning Koch
line, break, br
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more