Three column negative margins
Uses negative margins to enable a fluid center for a three column layout
How it works
The layout comprises five structural divs: header three columns - left, center and right and a footer. The header, center column and footer are fluid, and the left and right columns are fixed width.
This technique requires two wrapper divs, one around all three columns, and within it, one around just the left and center columns.
The center column is given a right margin as wide as the right column, which shoves the right column out of the layout to the right; then, by applying a negative right margin to the two-column wrapper, the right column is sucked, black-hole like, back into the right margin area of the center column. This allows the center column to "auto" out to 100% of the width available to it, and yet still allow the column to have sit to its right.
Using this layout, we can incorporate several user-friendly design features into one layout.
- Fluid center column
- Centering in browser window
- Min/max width settings
- Footer below longest column
- Full-length columns