3 columns with fixed width sides
The aims for the left column are achieved by
- Positioning it absolutely on the left starting at top.
- Keeping it coloured from top to bottom by letting a desired colour shine though from the body behind it.
- The body is used to achieve this, no need for an extra element here thus keeping the Ockam principle of not multiplying entities unnecessarily. A background image of a suitable pixel width, not more than 1px height is needed, repeated in the vertical direction and positioned by default to top left.
The right side's background colour is delivered by wrapping the right float in an absolutely positioned element. This wrapper is tied to the right side of the window in this arrangement and delivers the coloured background.
There are all sorts of ways to adapt this sort of thing to your requirements. Notice how the background image is used here for the left side (to avoid another wrapper) while the wrapper that is coloured on the right is merely given a background colour.
The fixed width of the side panels, naturally, will have the downside of all such widths in allowing the text to break out at big enlargements. But this is something many authors think worth paying for to get the benefits of the middle content not being too squashed. The middle still retains a good measure of fluidity.
The left column
The idea with the left col is to:
- Keep it left.
- Keep it coloured from top of viewport to bottom no matter how much content it has and no matter what happens to the right of it in the other two columns.
- Allowing the text to scroll
- Keep it simple.
The aims are achieved by:
- Positioning it absolutely on the left starting at top.
- Keeping it coloured from top to bottom by letting a desired colour shine though from the body behind it.
- The body is used to achieve this, no need for an extra element here thus keeping the Ockam principle of not multiplying entities unnecessarily. A background image of a suitable pixel width, not more than 1px height is needed, repeated in the vertical direction and positioned by default to top left.
The fixed width of this side panel, naturally, will have the downside of all such widths in allowing the text to break out at big enlargements when it runs out of room to wrap. But this is something many authors think worth paying for to get the benefits of the middle content not being too squashed by an em growing side panel.
The right column
The idea here is to cut down on the number of elements used to achieve that "all the way to the bottom" columning that people often like. Hence the use of the body to deliver background image.
The right side's background colour is delivered by wrapping the right float in an absolutely positioned element. This wrapper is tied to the right side of the window in this arrangement and delivers the coloured background.
There are all sorts of ways to adapt this sort of thing to your requirements. Notice how the background image is used here for the left side (to avoid another wrapper) while the wrapper that is coloured on the right is merely given a background colour.
The fixed width of the side panels, naturally, will have the downside of all such widths in allowing the text to break out at big enlargements. But this is something many authors think worth paying for to get the benefits of the middle content not being too squashed. The middle still retains a good measure of fluidity.