Devil in the Details

Getting three columns to line up next to each other, using just CSS, is a (fairly) simple matter of setting the float property on each column. To place a footer below the three columns, regardless of which one was taller, just set the clear property on that footer element and it will appear below the three (floating) columns.

The relevant markup takes on the following structure:

• Grandparent Container
  • Parent Container
    • Left Column
    • Middle Column
    • Right Column
    • clearing element