Article
HTML Utopia! Design Websites Without Tables - Parts 1 and 2
Absolute Positioning
The absolute positioning technique is another good option --- especially for three column layouts.
Notice how our main layer spreads to a width of 100% and our columns sit on top. We use margins to stop the main column's content from being overlapped.
In theory, all layers could be absolutely positioned, but you'll soon see why it's a good idea to keep at least one of them (the longest column) relative.
Headers and Footers can easily be slotted in. Because our main layer is also relative, it simply stacks up right after the header. Our absolutely positioned layers need to have their distance from the top set, so that they line up with the bottom of the header.
As long as we have a relatively positioned main layer, a Footer (which is also relatively positioned) will simply stack up after it. Therein lies a problem!
The Footer Issue
Our relatively-positioned layer (usually the main layer) must be longer than any other layers. If it's not, we'll get problems such as those illustrated in Figure 6.
This can be a real problem for database-driven sites, because you often have automatically generated content that you don't always plan for.
For example, say you had your databased article displayed in the main column, and the names of other articles listed in the right column. After some time, your client (a prolific writer) has more articles listed in the right hand column than you ever anticipated, and a couple of very short articles. This will cause a problem such as that depicted in illustration 8.
Another example is with short confirmation pages -- such as a thank you message -- as depicted in illustration 9.
The answer? Be prepared. Put limits on your queries for dynamic columns and pad out any short pages with a few <p> </p>.
Print StyleSheet
While you're at it, clean up your site for the printer. IE6, Netscape7 and Mozilla have good print previews that enable you to fine tune your Print Mode stylesheet without destroying forests.
Call your Print Mode Stylesheet with:
<link type="text/css" media="print" rel="stylesheet"
href="/includes/print.css" />
It's pretty easy too. You can simply turn things off by setting the display property to none. I like to:
Show's Over
This is probably just enough to whet your appetite. Remember, there are more and more browsers out there that support the standards for CSS. The ones I usually test on are:
Unfortunately there are still some minor idiosyncrasies amongst them, but on the whole it's not too hard to get your site working across all of them.
I hope you've enjoyed HTML Utopia! Don't forget to check out the SitePoint book HTML Utopia: Desigining Without Tables Using CSS, which builds on the concepts presented here. Read these four chapters from the book, and you'll be well on the way to design utopia! Good luck!