More CSS Layout Madness

I remain convinced that the whole CSS layout mess was poorly thought out, poorly designed, and poorly explained. Yes, it’s hobbled by poor implementations too; but can you really blame the poor implementers when the spec writers could never explain exactly what they meant? Proof of this is just how incredibly difficult it is to reproduce simple, basic, liquid two column layouts any third grader can throw together in five minutes with tables.

The latest problem I’ve noticed comes on this site when the post is not long enough to match the sidebar. For example, take a look at Links Matter. The Google ads end up below the text instead of to the right as they should. Or the Mac category page where both the Feed list and the ads disappear below the text. That is the “column” shifts left as soon as possible.

There’s probably a break or clear or keep property I can set somewhere to make this come out right, as long as the font or window isn’t too big or too small, of course. But why should I have to? Why couldn’t CSS layouts be based on liquid nested tables like the ones proven to work by years of experience? Why invent something new? Note I am not suggesting that HTML tables be used for layout; only that CSS define its own table layout independently of any HTML tables in the document being styled? Not only would this be simpler to code against and implement. It would handle some tricky cases in three column layouts with large and small fonts that CSS still can’t manage. (See Cafe au Lait for one example.) Even Java has finally learned what’s been obvious to web designers for years: tables are the natural way to layout a page. However the W3C still hasn’t figured this out.

Oh well. It’s probably too late to fix this now. But please, if you ever find yourself inventing a new layout scheme, be it a stylesheet language, a GUI layout manager, or something else; please, please try to organize it around two-dimensional nested tables rather than something that only appears to be simpler.

Meanwhile I think I fixed it by floating the sidebar to the right at the same time the content was floated to the left. That is, I changed

#sidebar
{
	padding: 20px 10px 10px 0px;
	}

to

#sidebar
{
	padding: 20px 10px 10px 0px;
    float: right;
	}

This works, at least in Firefox. However In Safari, it pushed the sidebar always completely below the content. Back to the drawing board I guess.

This entry was posted on Tuesday, November 29th, 2005 at 4:17 PM and is filed under Web Development. You can follow any responses to this entry through the Atom feed. You can make a comment, Digg this story, or trackback from your own site.