blog

At dynamIt we dropped HTML tables as a layout device long ago. It has been all CSS ever since. CSS for layout is really the way to go. It’s light, it’s flexible, it separates design from content making your site extensible.

I’ve written markup (XHTML/CSS) for dozens of sites now. And, as we build more and more sites my CSS style continues to evolve, or mature, if you will. But, CSS is a interesting topic, no matter how routine you think it is, there are always new tricks to discover.

I recently found a new one that I am pretty excited about. Certain elements have a block display meaning they appear with a line break before and after them (that is to say on a page they stack vertically one on top of another). Meanwhile, other elements display inline, meaning they appear within a line much like single letters within a sentence. Inline elements are great because they can appear next to each other and wrap to the next line, but they have certain drawbacks. For example, you cannot set a definite width or height for inline elements, nor can you give them margins.

But, I came across a different type of display. It is called inline-block. Just as you can imagine, it is the best of both worlds. Items will display as inline elements, but certain block properties are available to them. I jumped on to Google to learn more and found a very nice article on the topic at SitePoint.

I quickly noticed that there are two things (one good, one bad) that this article does not address.

First, the bad news, it is rather broken in Mozilla FireFox 2.x. If you have text in the -moz-inline-box <div> that is longer than the width of the <div> (something that is, by the way, a very common occurrence), it fails to wrap and spills outside the box. Luckily, the solution is quite simple. Just add a <div> with display: block and same width on the inside. The block-level div forces the text to wrap properly.

Second, the vertical-align CSS property actually works! Give the series of <div>’s set to inline-block a vertical alignment and they actually behave as you’d expect.

For all of you developers out these that think this sounds interesting, check out this quick example:


<style type="text/css">
.holder {
text-align: center;
width: 500px;
border: 2px solid #1C659C;
}
.category {
display: -moz-inline-box;
display: inline-block;
width: 90px;
margin: 5px;
border: 1px dotted #666666;
vertical-align: middle;
}
.category div {
width: 90px;
}
</style>
<!--[if lte IE 7]>
<style type=”text/css”>
.category {
display: inline;
}
</style>
<![endif]–>

<div class="holder">
<div class="category"><div>The quick brown fox</div></div>
<div class="category"><div>jumps over</div></div>
<div class="category"><div>the lazy dog</div></div>
</div>


This should produce the following output: