About using float

Update 2019: This post is really old, you should probably just use flexbox instead

The single biggest reason for weird bugs my students had today was css float. Using float is often not needed, as display: inline or display: inline-block often achieves the same things. It is however, sometimes, very useful, but there are some caveats that you need to avoid.

1. Always try to put floating elements inside a wrapping div.
2. Try to keep the floated elements seperate from other, non-floaty, elements.
3. This wrapping div should always have overflow: hidden, to avoid a whole range of strange bugs.

Here’s an example of a simple sidebar using float:

<div id="container">
  <div id="sidebar">
    <p>This is a sidebar</p>
  </div>
  <div id="content">
    <p>Lorem ipsum osv</p>
  </div>
</div>

#container {
  overflow: hidden;
}
#sidebar,
#content {
  float: left;
}
#sidebar {
  background-color: #f0f000;
  width: 100px;
}
#content {
  background-color: #00f0f0;
  width: calc(100% - 100px);
}