Header

• Back to Post
• Fixed Content, Fluid Background
• 2 Column Fluid with max-width
• 3 Column Fluid with max-width

Main Content

The layout here is mostly the same as the fully fluid layout we developed previously with one exception. In order to keep the lines of text from becoming too long I've given a max-width to paragraphs in both the main content and sidebar areas.

I've used 75% for the max-width of both columns, but you aren't limited to using the same amount in both columns.

% were used to remain consistent with the concept of fluidity. On large monitors this will lead to line lengths that might still be too long and so you might choose to set max-widths in px.

Because the content's width is limited while the column it resides in isn't, a large amount of whitespace may be present on larger monitors. I've added some padding on the left of the content div to help balance the whitespace.

Both columns also have a min-height applied. For large monitors the columns will appear to be of equal height. If you decrease the width of your browser you'll reach a point where one column is clearly taller than the other.

Sidebar

Prior to version 7 Internet Explorer doesn't support max-width and workarounds are necessary. With IE6 being phased out this likely won't be a problem, but it's worth knowing about.

As I've done with the main content column, I've given the sidebar some padding on the left to balance the whitespace a little better.

Switching column locations is simply a matter of changing the direction one or both is floated. Here both columns are currently floated left.

Footer