CSS Display property graveyard with Floats and Tables

Not-so-recently deceased: Floats for layout

CSS has given us many things. The separation of content and semantics has moved the web forward in the last 10 years more than even the most evangelical could have hoped. But there's always been a nagging issue with many developers: the falling behind of many browsers to support the necessary parts of the specifications to allow easy layouts. As older browsers start to die off and we can stop supporting dinosaurs, so too some of the tried-and-true techniques can be left behind.

I discovered this technique in 2010 (although it could well have been around longer) and I thought I'd take a moment to commemorate this big change in my own personal style with a quick look back. I won't be discussing how you use the technique: If you're not already familiar with the technique, a quick (Search Engine Trademark) will give you the ins and outs.

After tables there were floats

Tables for layout were all we had for cross-browser layouts of websites at one point. Once we started to uncover the possibilities and benefits of separating presentation and semantics, we needed a new method. Enter the float.

Originally designed to float elements like images within a box of flowing text, these became the go-to technique for cross-browser web development for close to a decade. Not that it was without flaws, in fact many developers stood by tables because of how god-awful floats could be to work with, especially with delightful older browsers and things like equal height columns. We used it for everything from image galleries, creating columns on a website to horizontal navigation items. And you know what, it felt icky.

There were plenty of other other options to go around, although none were as widely used, flexible or, let’s face it, dependable, as floating. On the horizon we could see the specification for CSS2 to allow us to use display:table, however they weren't supported in Internet Explorer at the time (we had to wait until 2009 and IE8 for that). So, for the time being, that's what we were stuck with.

New kid on the block: display:inline-block

It was a so-simple-how-did-I-not-think-of-it-earlier thought: why float when display:inline-block gives you almost all of the same control as floats without the hassles in IE? It was mid-2010 when I learned of the technique, and since then it's been a permanent part of my CSS vocab. The only times I use float are for when I’m trying to do what the spec authors created it for: float an element to the left or right of a bunch of text and have it wrap around.

The gotchas

While we’d been dealing with floats for a long time, inline-block was new and there were most certainly some quirks.

White space

Because elements were now a block-kind-of inline element (that’s the technical term kids), they take into account the white space between elements. It’s a simple fix, although something that might take some finding out if you don’t know what’s going on: make sure there’s no space between the inline block element’s end tags and the start of the next open tag.

Vertical align

It’s an opportunity as much as it is a problem, but you need to set vertical align on all of your inline-block level elements.

Internet Explorer

You should be all impressed I haven’t bagged out IE 6 or 7 in the first 500 words (boy did I want to!) The fix here is simple enough: all block level elements that you’ve made inline-block need to be set back to inline. Use your preferred method or targeting.

Resources

If you’re looking for some reading on floats or inline-block, some of my favourite are:


Thanks for stopping by.

Twitter
@tweetbollig
Subscribe via RSS
subscribe
Email
Skype call or chat
chat
Go to top