display inline-block, my new friend

One of the css properties that I’ve been using recently is display: inline-block for elements that are going to be sitting next to one another i.e. thumbnail images or anything similiar. Traditionally floats would achieve the same effect however, it wouldn’t be suitable to use it on elements which may have variable heights. So taking the example of thumbnails images which were 60×60 and one thumbnail which was in the middle and is 60×200, then any smaller images following the large image would start to stack up on one another. This is actually the expected behaviour of floats and is described in the w3c spec.

Any floated box becomes a block box that is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. The top of the floated box is aligned with the top of the current line box (or bottom of the preceding block box if no line box exists). If there isn’t enough horizontal room on the current line for the float, it is shifted downward, line by line, until a line has room for it.

By using display: inline-block you prevent the above behaviour from occurring entirely and force the next element not to position itself where room is available. There’s an article on sitepoint which describes this in much greater depth and illustrates the behaviour visually.

Usage

To use this property lets say we have the following markup:

<ul>
    <li><img src="small.gif" alt="small" /></li>
    <li><img src="large.gif" alt="small" /></li>
    <li><img src="small.gif" alt="small" /></li>
    <li><img src="small.gif" alt="small" /></li>
    <li><img src="small.gif" alt="small" /></li>
    <li><img src="small.gif" alt="small" /></li>
    <li><img src="small.gif" alt="small" /></li>
    <li><img src="small.gif" alt="small" /></li>
    <li><img src="small.gif" alt="small" /></li>
    <li><img src="small.gif" alt="small" /></li>
    <li><img src="small.gif" alt="small" /></li>
</ul>

with the following css

* {
    margin: 0;
    padding: 0;
}
ul {
    width: 500px;
}
    ul li {
        list-style: none;
        display: inline-block;
        vertical-align: top;
    }

Here’s a demo, resize the window.