Prevent floating sibling elements from wrapping in CSS

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 Show archive.org snapshot 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.