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

Copy
<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:

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

By refactoring problematic code and creating automated tests, makandra can vastly improve the maintainability of your Rails application.

Owner of this card:

Avatar
Henning Koch
Last edit:
12 months ago
by Henning Koch
Keywords:
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