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.

Opscomplete powered by

Save money by migrating from AWS to our fully managed hosting in Germany.

• Trusted by over 100 customers
• Ready to use with Ruby, Node.js, PHP
• Proactive management by operations experts

Read more Show archive.org snapshot

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