For the past few projects I’ve thrown out all use of pixels and relied heavily on an em’s and percentages for layout and font sizing. Why would someone take such drastic measures? Two simple reasons: usability and flexibility.
The current site, circa Fall 2006, uses this practice which makes the liquid layout possible with ease. A non-liquid example would be the Ellington site which uses a container set in EM’s with all inner layers set to percentages. When you increase the font size the layout scales appropriately, thus demonstrating good usability (or accessibility – I think they are one in the same).
Have you ever stood back and wondered, “should this site be wider?” Well with one miniscule change it can. Simply alter the container layer and everything follows suite as long as your inner layers have all been assigned percentages. The biggest caveat to this is dealing with IE not behaving well with 100% in certain situations. I’ve gotten around this by trying not to be so pixel perfect and looking at things more loosely. Upon doing more and more complex column layouts I’ve come to love this method of styling.
It’s time to see more liquid layouts or at least taking into consideration that the canvas we have is not fixed. Most of the software applications on our computer are liquid why not web sites?
Tip: Set the font-style property of the body tag to 62.5%. This makes 1em look like 10px, and so on.