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.