My floated layout won’t work!

Usually when people have trouble with floating columns it’s because they’ve specified a width where there doesn’t always need to be one.

A simple two-column layout can be achieved by:

1. Floating the element that comes first in the source and giving it a width.
2. Giving the other element a margin wider than the width of the float and in the same direction as the float. So, if you’re floating your left column, you give the other margin-left and vice versa. This column does not need a width as it automatically fills the remaining space.

It’s that simple. Let’s take a look at a few quick examples.

<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
</div>

Or, if we wanted to have the right column come first in the source:

<div id="wrapper">
  <div id="right"></div>
  <div id="left"></div>
</div>

If you want the columns to appear equal in length, you may want to look into using Faux Columns.