This column has a fixed width of 250 pixels. In order for the middle column to work, this column has to apply a negative margin of 250 pixels. This negative margin offsets its width. This allows an accurate fluid width of 100% to be applied to the middle column.

THREE COLUMN FLUID LAYOUT

The middle column is given a fluid width of 100%, which is offset by negative margins in the fixed columns, and with padding to the right and left in the body.

Through the manipulation of CSS alone, a three column layout can be achieved.

One of the problems designers may encounter is the footer will jump up over one of the columns at some screen widths. Therefore, you must test at different widths to ensure this doesn't happen.

BACK HOME