clear:both saves small baby from burning car

| 2 Comments

Twice I've used that damn contact form, and twice I've not even received an automated response. I admit, my first message was useless, but the second? I sent you the fix for your paying client's site! What's the deal?!?

Over at Modulo26, Andy posted about a recently finished site that he designed for a client. He mentioned that there was one IE display bug left to squash and said he couldn't nail it. I checked it out, and sure enough it seems like a job for the clear:both style.

Now not only does clear:both leap small buildings in a single bound, but it also fixes a large number of CSS layout problems. According to the W3C clear specifies if an element allows floating elements on its sides. What this means is that if you use clear:right, nothing floating will be allowed to the right of the object, forcing floating objects to the bottom of the styled object. In many cases this is needed to cause a background or container class to fully wrap a taller class.

I first learned of this style at A List Apart in the article Practical CSS Layout Techniques by Mark Newhouse. The article is excellent, and the style is an exceptionally important one to be aware of. It has helped Scott, Dave, me, and that baby from the car. When Andy finally gets his message from that seemingly useless contact form it will help him too.

These are the kinds of problems that crop up when working with CSS. They can be solved through a network of developers and designers willing to help each other out. The web provides that network. The web is a wondeful, wonderful thing.

2 Comments

clear:both is indeed a lifesaver, however I find myself needing to hard-code "br clear=all" directly into my pages.

I hate using it because is non-semantic, but there seems to be no alternative. if I use absolute positioning it kills my center alignment.

I don't know how familiar you are with Dave Hyatt, but he has a post detailing the complexities of the specs that define the clear attribute. It's a nightmare.
http://weblogs.mozillazine.org/hyatt/archives/2003_08.html#003945

Unlike you, I started out by applying the clear style to an empty div or one containing a non-brekaing space. This, as you said, is semantic trash though so I started looking at other ways of applying it. For me, it turned out that I was using container divs (not so semantically useless if they contain elements of a certain category, such as all posts) and these could have clear applied to them instead of the empty div.

The bottom line is that many of us who started by working with tables are having to retool our skills and CSS is complex. Working with tables was complex as well, just in different ways. By pooling our experiences, though, it'll all work out.

Recent Entries

NY Times Profile: Madden
I've always thought Madden was a goofball. Now I'm not so sure. The common complaint with Madden, who joined NBC's…
Goodbye Manny, Goodbye Manny...
It's time to say goodbye...  Nomar, Pedro, Trot, Manny, Damon, etc. etc. This Red Sox team new, with new young…
Sean Tevis and his campaign for KS state rep.
Until recently, I'd never given money to a political candidate or a political action committee. Two things changed that: The…