by Kyle Weems 16.January 2008 12:28
For a brief period this week, I felt like a crewmember of the ship of a modern day Bjarni Herjolfsson, part of a group of brave pioneers that was the first to discover something really new. Then, about ten minutes later, I realized I was instead a deluded, 500 years late Chris Columbus, whose only genuine claim to fame is to have confused the Bahamas for India... which I suppose is a natural mistake, as the two might vaguely resemble each other from a distance.
Late as I might be to the topic at hand (which contrary to the prior paragraph has nothing to do with the discovery of the new world), I've nonetheless decided to discuss something that I think is worth further dissemnation, as I've been literally breathing CSS for the past year (this involves a very unusual respirator that attaches directly to a monitor) and only just now learned about it. Let me try to explain what I'm actually talking about, with less metaphors.
When my friends are too lazy to move out of hearing range, I often tell them that the most common problem encountered in web design is creating a web site with two or more columns, followed by a footer (or any content, for that matter). The problem encountered is that to get two separate columns of items to appear on a web page, you usually have to do one of three things:
- Use tables (gasp!)
- Absolutely position the columns, and then push the footer beneath the columns using JavaScript.
- Float the columns, typically using something like the 'liquid column layout with negative margins' technique described quite nicely here by Ryan Brill.
There's several reasons why the quirky techniques mentioned are used. I'm really too lazy to sum it up myself, but trust me that straight forward solutions are never enough. Of those three techniques, the first is an abomination, the second is annoying as heck due to a number of browser/javascript issues, and the third is actually quite nice. In fact, I often use the last technique (or modified versions thereof) on a regular basis. However, it does present a small issue that gets many web designers in a tizzy.
Web designers are excitable like that. It might have something to do with the caffeine levels in our blood streams.
The issue is that in an ideal world, a web page should be separated into two discrete parts. All of the content of a page should be in the HTML code, and all of the presentation of a page should be the responsibility of the stylesheets. Furthermore, for the HTML to be truly clean and nice, elements should only be in the page if they actually contribute to the content. In the negative margin technique described by Mr. Brill, we break that rule by adding a small, mostly harmless div below our columns, with nothing in it. It exists only to hold a place for our CSS, which uses it to clear the floats with a "clear: both;" style. Without it, the whole thing doesn't work. This is all well and fine, but it means that we've got an element in our HTML that provides NOTHING to the content!
Calamity!
This is, sadly, a corruption that most web designers, including myself, have allowed in order to make those liquid column layouts work. We'd hide our little divs in shame, secretly accepting their necessity while publicly smiling and pretending that nothing out of the ordinary is occuring. However, one day while trying to fix a problem in IE6 (which is, it seems, the primary source of my work), I stumbled across an interesting blog post at SitePoint, discussing the clearing of floats. It described, amongst other things, a solution to the classic problems faced by floating columns by simply adding either "overflow: auto;" or "overflow: hidden;" to the parent element holding the columns.
Intrigued and excited, I did some more searching. Sure enough, people were using this technique and talking about it. I did some tests, and not only did it work like a charm, but it helped clear up the particular IE6 difficulty I was having.
The technique is so simple to describe, I'm basically repeating myself by going into the following details. When you've got one or more floated elements (such as the floating columns I've been discussing above), and you want to wrap the parent element around them without adding dirty little clearing divs to your markup, you can instead add either the "overflow: auto" or "overflow: hidden" style to the columns' parent element. To make things stick with IE6, you'll also want to add an IE6 specific style for "height:1%" (see how to apply styles only to IE6 without causing CSS validation issues in my post 'Say Goodbye To The Stars'). There is the potential for you to have problems with scrollbars, but I find that usually one of the two values ('auto' or 'hidden') is clear of these. Some considerations regarding your design are also worth taking. Absolutely positioned elements that would normally appear visually outside of their parent will be hidden by the overflow style, so you need to be sure that you're not cutting anything off. Generally, though, I've found that this is a fantastic way to clean up my markup while still keeping those columns in check.
I was jazzed about this small CSS change in a way that pretty much results in me getting uninvited from any future parties with most of my peer group. Furthermore, I felt like I was part of something new and hip, that not a lot of designers new about. I was relevant!
Then I stopped to actually look at the posting dates of all those blog entries. They were from 2005. Early 2005.
*sigh*
Does discovering something three years after the fact still count as 'leading edge'?
No? Oh well. Back to the drawing board. But timing aside, I think this is a nifty weapon in a designer's arsenal that everyone should have.