qasimalyas

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;}

The results would be a page where no elements are stacking and document layout is maintained. With that being said there is a caveat, display: inline-block doesn’t work in Firefox 2 but fortunately there is a workaround to get Firefox 2 to render correctly, though it ain’t pretty. I also recommend readers visit ppks’ site which illlustrates what each display value is, its browser support and illustration of the rendering.

I have set up a demo page which compares floats vs inline-block, without the Firefox 2 workaround, and I certainly hope that designers and developers start to use this more often. I welcome any comments, criticism or suggestions on improving the code.

This entry was posted on Saturday, December 27th, 2008 at 9:27 am and is filed under article, development, web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.