How I learned to stop floating and love the inline-block

Posted by Angelo Simeoni

Jul 02

Floating columns is a typical approach to defining page layout. The obvious issue with floating columns is clearing said floats. When you start dealing with the details of auto-clearing elements and browser inconsistencies, you might start to desire an alternate approach.

Clearing issues & browser inconsistencies aside, floating is not the natural way to define layout. Floating is intended to be used to allow inline elements to wrap around floated elements.

Float Example

When floats are used for layout, things can break if the contents of one column is greater than that of another.

Floated Layout Example

Inline-block to the rescue. Inline-block is another display type that offers several advantages to floating layouts.

However, inline-block has its own set of quirks.

That being said, here’s how to define inline-block for understanding browsers.

1
2
3

.inline-block {
  display: inline-block;
}
As with most things, it isn’t that easy. First obstacles: IE6 & IE7. 
1
2
3
4
5
6

<!--[if IE]>
  .inline-block {
    zoom: 1;
    display: inline;
  }
<![endif]-->

zoom: 1; causes a state proprietary to IE called hasLayout to have a value of true. hasLayout is a shallow, fickle beast, but suffice to say that the preceding two rules will cause the affected boxes to behave as inline blocks in IE6 & IE7. Why? It kind of just does. There are reasons why, but it’s much easier just to accept this one.

Caveat: Inline elements are white-space sensitive. To avoid this issue in IE, make this: 
1
2
3
4
5
6

<div class="inline-block">
  <p>some text</p>
</div>
<div class="inline-block">
  <p>some text</p>
</div>
into this: 
1
2
3
4
5

<div class="inline-block">
  <p>some text</p>
</div><div class="inline-block">
  <p>some text</p>
</div>
Firefox 3 and Safari 3 have implemented inline-block according to the CSS 2.1 spec. Firefox 2: not so much. For reasons we won’t get into here, Firefox 2 removed support for inline-block. There are, however, a slew of proprietary mozilla extensions for display. Most are meant for use with XUL, part of the actual Firefox application, but two of these allow us to create blocks that behave like inline-blocks. 
1
2
3
4

.inline-block {
  display: -moz-inline-box;
  -moz-box-orient: vertical;
}

(-moz-box-orient determines the orientation of children elements.)

Final CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13

.inline-block {
  display: inline-block;
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  vertical-align: top;
}

<!--[if IE]>
  .inline-block {
    zoom: 1;
    display: inline;
  }
<![endif]-->

vertical-align defines how the boxes line up – either at the top, middle, or bottom of the tallest inline-block box. Inline-block example.

This technique works in IE6, IE7, Firefox 2, Firefox 3, and Safari 3.

Comments on this post

Oleg

Jul 02

Oleg said,

So now there’s IE and even Mozilla specific css parameters (and more of them), white space sensitive markup (I guess you can force HAML spew out html in a single line somehow).

Clearing floats is not that difficult. Unless you really want to be able to vertically align stuff, inline blocks seem way too clunky.

How do Safari, Opera, KHTML browsers feel about it anyway?

Will

Jul 02

Will said,

Wouldn’t you want to target IE less than or equal to 7? This way if IE8 supports inline-block and breaks hasLayout you don’t have to fix it later.

rubylicious

Jul 02

rubylicious said,

Interesting.. I’ve had the exact same problems with floats that mess up. Too bad with all the workaround to get it to work with all browsers..

Chris Lloyd

Jul 02

Chris Lloyd said,

I find that using floats and clearing them with overflow: auto is very easy and works in every browser (except for IE5 and an old version of Opera, I think, don’t quote me on that). It doesn’t have all the extra CSS markup with is required with inline-block and is an extremely small and easy hack.

Damien

Jul 03

Damien said,

Works nicely in Opera 9.5. Don’t have an older versio nanymore so can’t say for Opera 9.

Eric Anderson

Jul 03

Eric Anderson said,

Great article. I’ve always wanted to use inline-block but resisted because of browser compatibility. Like others I feel there are too many “workarounds” here to use on a regular basis. Too difficult for others to understand what is going on. But I imagine there are a few circumstances where this will be just the ticket to do what I need it to do.

Angelo Simeoni

Jul 03

Angelo Simeoni said,

@Will, you’re right – the conditional comment should target ie7 and below.

I will be making a follow-up post to show how inline-block can be especially useful.

Clayton

Jul 03

Clayton said,

Seems like the whitespace issue would trip me up and cause a lot of tearing-out-my-hair type problems. But, once I got used to it, probably not so bad.

I’m going to give this a shot with an existing float layout I’ve got and see how it works. Thanks!

Ryan McGeary

Jul 05

Ryan McGeary said,

I think the best part of this discussion is understanding how inline-block can be properly simulated across browsers. I definitely learned something, but the whitespace dilemma makes it a no-go for me. It smells too brittle. I feel it would cause unneeded stress when the source is in a different format from the output (haml, markdown, textile, helper methods, etc.). However, I agree that floated layouts are far from an elegant solution.

Ken Collins

Jul 06

Ken Collins said,

Nice to see you guys talking about XHTML/CSS. It is good to have an article like this that is akin to ALA. Great topic too!

Jason Robb

Sep 18

Jason Robb said,

Very intriguing, I’ll be sure to give this a shot some day soon. Thanks, Angelo!

Sorry, comments are closed for this article.

© 2000 - 2009 by thoughtbot, inc.
written by a bushel of tiny robots