Subscribe Firefox Download Day (= display: inline-block day!)
June 18, 2008It’s Firefox 3 Download Day! Go get it, please.
I am excited about this, but perhaps not for the same reason most other people were. I am excited because Firefox 3 is the first version to implement the CSS rule “display: inline-block”. Inline-block allows you to generate chunks of content of rectangular shape that will flow inline in your content (like text, images, or tables) but whose contents act like a block, and whose borders and margins are respected in the flow.
Let’s make it clear what I mean.
The beauty and versatility of display: inline-block
Setting a CSS element’s display: property to inline-block tells the browser to treat the element as a rectangular block, with internal flow just like any other block, and to respect the padding, border, and margins, but to flow that rectangle with other inline content - exactly the way the browser would flow an image. In addition, you can specify the width and height of inline-block items. This is a crazy useful concept from a layout perspective: it would allow you to make buttons out of text that lay out horizontally, or to layer images on top of each other inside a small span or div.
Here’s an example of a series of list items set with border, padding, and a width and height. The code first:
<style>
ul {
width: 400px;
border: 2px solid black;
background: #aaf;
}
li {
border: 2px dotted blue;
padding: 1em;
width: 100px;
height: 35px;
}
ul.inline li {
display: inline;
}
ul.inline-block li {
display: inline-block;
}
</style>
<h2>Padded words wrapped with display: inline;</h2>
<p>
<ul class="inline">
<li>Lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>consectetur</li>
<li>adipisicing</li>
<li>elit</li>
<li>sed</li>
<lido</li>
<li>eiusmod</li>
</ul>
</p>
<h2>Padded words wrapped with display: inline-block;</h2>
<p>
<ul class="inline-block">
<li>Lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>consectetur</li>
<li>adipisicing</li>
<li>elit</li>
<li>sed</li>
<li>do</li>
<li>eiusmod</li>
</ul>
</p>
Here’s how Safari renders the above code (correctly):
And here’s how Firefox 2 renders it (incorrectly):
Horrific - FF2 simply ignores inline-block, causing the list elements to render in their default display mode, block. What’s galling about this is that for several years Firefox has been the only browser that gets it wrong! That’s right, even Internet Explorer 6 gets this right … at least on some elements, specifically those that are natively display: inline, like spans and anchors.
The Firefox bug report was filed way back in the days of Firefox 1 nine years ago. Yes, you read that right. It sat there, unfixed, while every other browser in the world implemented it.
Anyway, today web developers everywhere can rejoice. Now, at last, the released version of every major browser supports display: inline block. So, with only another year or two waiting while FF2 users upgrade to FF3, designers will be able to start using this singularly useful CSS rule (at least in cases where IE supports it as well).
A parting example
A parting example of the kind of cool trick you can play with inline-block: text flowing inside a sized box that is itself flowing inside text.
Code for flowing text inside flowing text:
<div style="font-size: 250%; width: 600px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
<span style="width: 130px; height: 40px; font-size: 9px; display: inline-block;
padding: 1em; border: 1px solid black; overflow: hidden;">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur.
</span>
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</div>
How it renders in a compliant browser … including IE6!*
*Well, more or less. IE6 gets it reasonably close.