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.