How many times have you used float:left to make a bunch of elements align horizontally? Usually this technique is used on lists (of both the ul and ol persuasion) and generally works just fine under a few preconditions. The first precondition is that you are comfortable using some form of a clear-fix hack. Either you apply overflow:hidden to the container, or you add a meaningless empty div with clear:both, or you apply some magic with the :after pseudo-class. While this isn’t a deal breaker, it is annoying.
The second precondition is that all floated elements are of the same (fixed) height. Of course, your original mock-ups with dummy data and lorem ipsum text all use the same element just repeated across the page, right? And then the client provides actual content (hopefully), and you find that some items have a really long title, or a super-tall product image. And what happens? The floats ‘snag’ items and you end up with this:
see fiddle
If the previous screenshot is what you going for, or both previous preconditions hold in your case, you may stop reading right now. Otherwise, read on and you’ll learn how to create this instead:
see fiddle
First, I must give credit where credit is due. The technique I’m about to describe (and improve upon) was covered by Ryan Doherty over at the Mozilla WebDev blog. I suggest you read his post first because I’m going to breeze through his foundation and jump into my improvements.
Foundation
Here is the HTML will be working with:
<ul>
<li>
<h3>Product 1</h3>
<p>Some product description.</p>
</li>
<li>
<h3>Product 2</h3>
<p>Some product description.</p>
</li>
<li>
<h3>Product 3</h3>
<p>Some really, super, long product description.</p>
</li>
...
</ul>
And some aesthetic styles not relevant to the inline-block layout:
ul {
list-style:none;
width:440px;
}
li {
border:1px solid #888;
-moz-border-radius:3px;
width:75px;
text-align:center;
margin:5px;
}
h3 {
font-size:14px;
font-weight:bold;
margin:.25em;
}
p {
margin:.25em;
}
Compliant Browsers
The first step is to try an use the proper CSS property: display:inline-block. This property gives an inline element, block-like properties. Such as the ability to have width and margin. With just this property, we have support in Firefox 3+, Safari 3+, Chrome 1+, Opera 9+, and IE8+. Not too shabby.
li {
display:inline-block;
}
Fixing the Rest: Firefox 2
Aside from IE 6 and 7, only Firefox 2 fails to support inline-block. To get support in Firefox 2, simply add the mozilla-specific property display:-moz-inline-stack prior to the display:inline-block declaration. Non-Gecko browsers will ignore the -moz rule. Firefox 3+ supports inline-block so it will override the -moz-inline-stack rule. Using the -moz-inline-stack rule for Firefox 2 also necessitates a div be wrapped around the inline-block element’s contents. Given Firefox 2’s latest market share numbers (most give it under 1% overall), I would generally concede that messing with -moz-inline-stack and an inner-wrapping div is unnecessary. For this reason, I have removed the -moz-inline-stack rule from my Inline-Block gist on GitHub, however, you can see it in action at jsfiddle. Feel free to add it back in yourself if Firefox 2 support is necessary.
Fixing the Rest: IE 6/7
IE 6 and 7 both support inline-block natively but with a caveat; they only support it on elements that are inherently inline. Thus, block elements like div and list-item elements like li won’t apply inline-block. However, IE 6/7 has the concept of ‘layout’. (see On Having Layout). IE treats elements with layout triggered exactly the way inline-block elements are supposed to work; that is, block-level elements that are displayed inline. So for IE6/7 we reset the display to inline, and trigger hasLayout with zoom:1.
* Note: You can apply the IE 6/7 rules in any manner you wish. Conditional Comments paired with IE-only stylesheets is generally the preferred method. However, I have gone with the *hack in this case to make these utility classes copy/paste-able.
li {
display:inline-block;
*zoom:1;
*display:inline;
}
The final touch is to set vertical-align:top to make the boxes line up across the top:
li {
display:inline-block;
*zoom:1;
*display:inline;
vertical-align:top;
}
Room for Improvement
So now we have our elements aligned horizontally without using floats. We have one last problem which is where I will improve on Ryan’s method. In the screenshot below I have changed the li margin to margin:5px 0; We would expect the left and right borders of each box to touch, no?
The problem is due to the fact that white-space surrounding inline elements is displayed. Of course, this makes perfect sense. Imagine if the white-space between words in a sentence weren’t displayed! The trick is to take advantage of letter-spacing and word-spacing to counter the white-space between our inline-block elements. (This is unnecessary in IE6/7 which already ignores the white-space between boxes because the elements have hasLayout triggered and are not technically inline-block.)
Six of One…
My first attempt was to apply a negative word-spacing to the container. Word-spacing is inherited, so we must reset it to normal on our inline-block elements themselves so as to not affect their children. With word-spacing set to -1em, we have eliminated the offending white-space in Firefox and Opera.
see fiddle
…Half a Dozen of the Other
In order to fix WebKit (Safari, Chrome) we must also apply negative letter-spacing. Interestingly, applying only letter-spacing actually fixes both WebKit and Firefox which means that either letter-spacing or word-spacing will work for Firefox. However, in order to appease Opera, we will apply both. see fiddle
All Together Now
I have pared down the necessary rules to a set of utility classes named ib-container and ib-block, as seen below. You can also find them in a gist on GitHub and as a fiddle on jsFiddle.
.ib-block {
vertical-align:top;
display:inline-block;
*zoom:1; /* IE6/7 */
*display:inline; /* IE6/7 */
}
.ib-container {
letter-spacing:-.25em;
word-spacing:-1em;
}
.ib-container .ib-block {
letter-spacing:normal;
word-spacing:normal;
}
Other Variations
They can be used on list items as seen in this example or any other set of sibling elements:
<div class="ib-container">
<div class="ib-block">…</div>
<div class="ib-block">…</div>
<div class="ib-block">…</div>
</div>
They can be used without the ib-container class if the white-space between ib-block elements is not an issue for you:
<ul>
<li class="ib-block">…</li>
<li class="ib-block">…</li>
<li class="ib-block">…</li>
</ul>
They can be nested so an ib-block element becomes an ib-container for other ib-block elements:
<ul class="ib-container">
<li class="ib-block ib-container">
<div class="ib-block">…</div>
<div class="ib-block">…</div>
</li>
<li class="ib-block ib-container">
<div class="ib-block">…</div>
<div class="ib-block">…</div>
</li>
<li class="ib-block">…</li>
</ul>
Tags: css, inline-block, layout
