Expanding a Column to Fill the Remaining Horizontal Space

When you have two columns on a page, there is a pretty simple (though non-obvious) way to make the second column fill up the remaining width of the parent.  First, you must float the first column to the left and set its width.  Then, instead of floating or setting a width on the second column, change its overflow to anything but visible (e.g., auto or hidden).

Also worth noting is that you have to trigger hasLayout for IE6 and IE7.  Adding zoom: 1 to the right column will do the trick.

Essentially, changing the overflow puts the right column in its own "block formatting context."  A block formatting context doesn't allow sibling or ancestor floats to intrude on it and doesn't allow sibling floats to escape it.  The right column will belong to its own block that fills the rest of that remaining space.