HTML and CSS Reference
In-Depth Information
three-column layout in which each column is as big as it needs to be, with any extra space distributed among
the columns. You can specify widths for the columns, but you don't have to. With CSS, you usually need to
specify widths for at least one of the columns.
Older browsers may not work as well with the CSS versions of a page as they do with the table layouts.
However, they will still see the complete content of the page, and given the minuscule market share of browsers
that don't support CSS, that's good enough.
Although the overall site may download faster and perform better with external CSS stylesheets, that is likely
not true for the first such page visited. The first time a browser loads the external CSS stylesheet two HTTP
connections will be needed. Over a fast connection, this is negligible, but it can cause temporary problems for
dial-up clients and slow servers. I still tend to think that the speedups on second and subsequent pages more
than outweigh this, though.
Laying out pages with CSS absolutely has a steeper learning curve than laying out pages with tables. This is
very much a technique for full-time professionals. Amateurs should either use professionally designed templates
or stick to simple, linear pages with browser default layouts.
Even for professionals, CSS layouts are much harder to implement and debug, especially across browsers, than
table-based layouts. You have to invest more time and effort upfront. The saving grace is that not too many
layouts are needed. Probably less than a dozen basic layouts account for 99% of all web pages, and almost all
of these are simple variations of one to three columns with optional headers and footers in varying widths and
heights. Consequently, you can copy preexisting CSS layouts and make slight modifications, rather than
reinventing each layout from scratch every time.
Mechanics
No one layout works for every site and no one recipe fits all needs. However, certain common layouts appear
frequently enough to be worthy of special notice. Mastering the techniques involved in these layouts will enable
you to customize them for many other cases. In particular, three layouts are among the most common on the
Web today:
Two columns, with a fixed-width sidebar on the left and a liquid content column on the right
Two columns, with a fixed-width sidebar on the right and a liquid content column on the left
Three columns, with fixed-width sidebars on the right and left and content in the middle
Layouts with fixed-width content columns are also common. However, fixed-width content is almost always a
bad idea. Users have different screen sizes, browser widths, font choices, and more. Some users maximize their
browser windows and some don't. (Windows users are much more likely to maximize their browser windows
than Mac users are, even on identically sized monitors.) One size does not fit all.
These layouts may or may not have headers and footers. Usually, the header and footer belong to the main
content column. However, they can also precede or follow all three columns, in which case they usually extend
across the full width of the browser window. A header that precedes all three columns is a little more common
than a footer that follows all three. The problem with a footer that is below all three is that it may show up far
underneath the main column if the main content is short.
Usually the column heights are determined naturally by the amount of content they contain. Occasionally, the
columns may be set at a fixed height to guarantee equal widths. However, this is problematic for content-heavy
sites because the content of the individual columns is by no means guaranteed to match up. It works a little
better for short pages consisting of no more than one screen of text.
Search WWH ::
Custom Search