Welcome to Giant Robots Smashing Into Other Giant Robots — a weblog about development, business, design and technology — written by thoughtbot.

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

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.

  • simple, maintainable grid-based system of layout
  • vertical-align columns (top, bottom & middle)
  • no clearing floats

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

  • markup is whitespace sensitive
  • display of child elements in firefox 2 can be tricky

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.

About this entry

You're reading an entry on GIANT ROBOTS SMASHING INTO OTHER GIANT ROBOTS, the company weblog of thoughtbot, inc.

Author:
Angelo Simeoni
Published:
July 2nd 01:11 PM
Updated:
July 2nd 01:47 PM
Sections:

 

thoughtbot is hiring

We are hiring web developers and web designers in both Boston and New York, NY.

What are we up to?

We built Shoulda, an eclectic set of additions to Test::Unit; Paperclip to manage uploaded files without hassle; factory_girl a replacement for Rails fixtures; Jester, a REST/ActiveResource client written in Javascript, and Squirrel, an enhancement for ActiveRecord's find syntax; — amongst some other projects.


Chad (President) and Jon (CTO) co-authored a technical book titled Pro Active Record: Databases with Ruby and Rails, which explores the ins and outs of the ActiveRecord ruby library. You can buy it today at Amazon.com.

About thoughtbot, inc.

We are a small web application development consulting business, with offices in Boston, MA and New York, NY. If you're looking to find a team for your next web development project or your new web application — get in touch.