I am engaged to the beautiful and wonderful Tara Cleaver!

Docking Is Better Than Floating

February 24th, 2005 Comments Off

Note: This article is more whimsy than tutorial. If you’re looking for instructions on how to dock a footer, I’ve found [this method](http://www.themaninblue.com/writing/perspective/2005/08/29/) to be excellent.

Any web-standards person will tell you that CSS is better than tables, for laying out a site. This site uses CSS instead of tables. They’ll probably also tell you that as powerful as they are, some CSS techniques are just barely worth the effort.

If you’re well familar with positioning and floating already, you’ll want to skip these bits.

###Position It There

The way that you’re _supposed_ to create a layout with CSS is by using the position: absolute rule. Using this, you can ’snap’ an element to a position relative to next-highest-up positioned element. For example, on the current layout of this site, I’ve used position: absolute to place several of the pieces of the header bar up there.

What’s the problem? There’s no way to position an element _below another positioned element_. That is, if you’ve got a content box of indeterminant length, there’s no way to place a footer _below_ it. In standards-compliant browsers, you can snap an element to one of the bottom corners of the body-tag, but IE snaps that to the viewport instead of the bottom of the document.

Nevertheless many designers have used position: absolute with marvelous results so long as you don’t need a footer that stretches the whole width of a page. In the link above, Jason Santa Maria simply places the footer text inside the box that’s positioned to the middle, so it’s unable to stretch to the sides.

Unfortunately, what’s happened with many sites layed out using positioning is the ‘coffee-filter-design’. As the site goes down the page, it gets [narrower and narrower](http://www.designbyfire.com/), with no proper close-off at the bottom. Design By Fire is a very beautiful and classy site, but it seems like a clear illustration of the technology limiting the designer.

Update: Design By Fire has since changed their layout.

###Float My Boat

The notion of floating elements was supposed to replace the old ‘align’ tag. So instead of creating an image-tag in the flow of a document and setting it to align=right, you could set it to float: right either in the stylesheet or in the style-tag.

With floats, it’s possible to create a layout column by floating an element to the left or right and then wrapping the content in an element with a margin that sets it apart from the floated sidebar.

What works about this? Well, you can set an element to ‘clear’ all previous floats. So on this site, there’s different floating column configurations depending what page you’re viewing, but the footer at the bottom can always just ‘clear’ whatever’s there and arrange itself at the bottom of the page, closing off the document.

What’s wrong with floats? It’s an ugly hack. You have to wrap lots of arbitrary tags around pieces of your page. Lousy browsers gum them up. When they break, they break very badly.

###The technique that the W3C forgot: Docking

I re-discovered the notion of docking recently, laying out Windows forms in Visual Basic .Net. The concept is that rather than just setting an element’s position relative to the top-left corner, you can have it fill an entire edge. Imagine being able to just dock a header to the top, a footer to the bottom, and a column to the side!

It’s an extraordinarly powerful layout technique because _the order of the docking matters_. If you dock Element A to the top of the window and then dock Element B, Element B will sit below Element A. So docking has two parts: You declare which edge to dock to, and then you set what order to dock in.

Imagine styling HTML form elements where you have the ability to just dock them to each other!

###Extensible Methods

Will we ever see more powerful tools such as this appearing in the XHTML/CSS toolbox? Probably not directly. CSS is mature enough that it’s time to just make moderate improvements and wait for the browsing population to move to browsers that can deal with the current spec. And in the meantime, add those missing features with a few well-placed JavaScript tricks.

In the end, a webpage with some unknown amount of content is always going to be a header, a flexible-length body zone, and then a footer.


Comments are closed.

© 2004-2015, Mike Purvis, some rights reserved. I'm running Wordpress, and I have an RSS feed.

resume writing services