Drop Shadow on the Body

A common problem in trying to make pretty sites is keeping the text width sufficently narrow to be easily readable. The TEX documentation is the first place I ran across issues of optimal line length, but the issue is oft discussed.

The problem is finding a balance between two issues:

  1. Readability: As the eye is traversing content, it must return to theleft side of the paragraph every so often to find the start of the next line. If the line is too long it takes extra time to find the line and it slows reading speed. Also, huge blocks of text look more daunting and are more likely to be skipped by a browsing web-surfer
  2. Space Utilization: Using fixed width layouts can help make your site prettier, but it wastes screen space. What's the point of getting a 27`` monitor if it just means five extra inches of empty space on your favorite website?

Fixed Widths:

Attractive layouts that scale well are difficult to do. One of the styles that I've been asked to use in a recent site is drop shadows on the sides of a centered content area. Generally this is achieved by making a background of a fixed width and nesting another div inside of it:

This content should have the drop shadow on the sides as well as being centered horizontally and vertically. There are four <div>s used to do this:

  • #fixedwidth: holder for the example (with a black border)
  • .cell: vertical centering in CSS browsers is done by using the table-cell display, but table cells can't be centered horizontally, so another element is needed for that (with a green border)
  • .container: a fixed width element with fixed_width_bg.png as a background (with a blue border)
  • .content: actual content holder (with a red border)

Variable Heights:

The obvious problem with that layout is: what if there is a page where we need the content to be more than 620px? (That's the width of .content.) There are definitely cases where this could happen. I'm seeing it especially with tables because it keeps the text reasonably short in each column, but the entire width tends to be wide.

A simplistic solution is to simply do a new background for different layouts. What if I want the content to expand to 80% of the screen and maintain the drop shadows. Is that possible?

The same basic elements exist for centering: #variable, .cell and .container, but there are two additional elements along with .content: .leftcol and .rightcol

I like this layout because quirksmode says:

"For instance, if you want to make an element as high as the entire page (whatever this height may be) you're out of luck. Although it might seem simple the specs (and the browsers' unthinking conformance) make this completely impossible.

The spec says: 'If the height of the containing block is not specified explicitly (i.e., it depends on content height), the value is interpreted like auto'."

This is mostly true. In IE, if a height is specified on an element that is too small, the height will be reassigned to the full height. So, the height on the .container is set to 0. When the height on .left and .right is set to 100% it makes them fill correctly. Unlike mant three column layouts, .content is a normal block element (not floated). This is because .left and .right need to have their widths specified as pixel values and since I don't know the pixel width of the containing element (.container has a width of 75%), I can't specify a pixel width for .content.