August 28th, 2008 - by Paul OB

display-inline:block

One of the values for the display property is inline-block and although it has been around for quite a while now browsers have been slow on the uptake which is a shame because it’s just the sort of thing that can be very useful. In this article we will investigate ways to implement display:inline-block in a number of browsers.

If you are unfamiliar with inline-block then its use is defined as follows: “an inline-block makes the element generate a block box that’s laid out as if it were an inline box“.

What this means is that a “block level box” can retain most of its block level capabilities but in an inline environment. This would allow you to align a number of boxes on the same line all with their own width and height much in the same way as floating the elements but having the benefit of allowing inline rules to be applied to them unlike floats.

For example, three or four inline-block elements could be aligned horizontally and centered by using the text-align:center property on the parent. This would automatically center the elements within the available width. We could also apply the vertical-align:property to align their top or bottom edges with each other.

Perhaps it’s best to start with the finished example so you can see what we are talking about. The result is also shown in the screenshot below.

Figure 1

As you can see in the above we have achieved three (apparently) block elements all aligned nicely in the same row. The elements are perfectly centred and they all have their bottom borders aligned with each other. Imagine trying to do this with floats.

The truth is you could not do this automatically with floats at all as you could never align the bottom borders unless you were using fixed heights and then could calculate the margins for each. It is also very difficult to center floats also. With very little code we have achieved this effect so now we will get down to specific details.

How’s This Done

For Firefox 3, Opera and Safari we simply use the display:inline-block property value and that’s all there is to it. The vertical-alignment is taken care of by using the vertical-align property which applies to inline elements only which includes inline-block elements (not forgetting table cells of course).

The centering is handled in the same way that we would center text with text-align:center.

Using the above properties our basic code to center and align three elements is as follows.
CSS

  1. .cols{
  2. width:44em;
  3. margin :auto;
  4. text-align:center;/* centers inline-blocks*/
  5. border:1px solid #000;
  6. padding:10px;
  7. }
  8. .cols p {
  9. display:inline-block;/* FF3, Opera, Safari */
  10. width:12em;
  11. margin:0 1em 0 0;/* need to remove top and bottom margin from p element*/
  12. padding:0.5em;
  13. border:1px solid #009;
  14. vertical-align:bottom;/* align to bottom */
  15. background:#f00;
  16. }
  17. .cols p.last{margin:0}/* remove right margin from last element so that they are all centered*/

HTML

  1. <div class="cols">
  2.     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc commodo lorem ut justo.</p>
  3.     <p>Ut molestie libero quis massa elementum tristique. Aliquam erat volutpat.</p>
  4.     <p class="last">Duis purus diam, gravida et, mattis eget, semper ac, tellus. Suspendisse velit nunc, varius ut, pharetra malesuada, suscipit ut, lacus.</p>
  5. </div>

Browser Support

At present the support for inline-block has just been added to Firefox 3 while Opera and Safari already support it.

So far so good but what about IE and Firefox2 I hear you shout!

For Firefox 2 (and earlier) we can use a Vendor Specific Extension and use the proprietary display:-moz-inline-box; (not -moz-inline-block as you may have expected although that property does exist).

-moz-inline-box will allow Firefox 2 (and some older versions) to have a similar functionality as if they were using display:inline-block. Although I often tell you to avoid proprietary code there are times when nothing else will do but it’s a risk you take and a choice you must make for yourself. Remember that proprietary extensions don’t follow the standard exactly and may differ to the real CSS property and of course they won’t validate.

So, armed with our new code let’s add it to our existing CSS and see what happens.

  1. .cols{
  2. width:44em;
  3. margin :auto;
  4. text-align:center;/* centers inline-blocks*/
  5. border:1px solid #000;
  6. padding:10px;
  7. }
  8. .cols p {
  9. display:-moz-inline-box;/* Firefox 2 and under*/
  10. display:inline-block;/* FF3, Opera, Safari */
  11. width:12em;
  12. margin:0 1em 0 0;/* need to remove top and bottom margin from p element*/
  13. padding:0.5em;
  14. border:1px solid #009;
  15. vertical-align:bottom;/* align to bottom */
  16. background:#f00;
  17. }
  18. .cols p.last{margin:0}/* remove right margin from last element so that they are all centered*/

If you test the result in Firefox 2 you will get a display as shown in Figure 2 below.

Figure 2

Unfortunately although the red blocks are aligned as expected the text inside is flowing out of the containers. It seems that this extension has a few bugs so we will need to add an extra wrapper around our blocks and apply another width to hold everything in place.

The rules are changed from targeting the p element and applied to a surrounding div instead which allows us to set a width on the p element to contain the text within the block. In most cases you would have a wrapper like this anyway so it’s no real problem.

The change in code is as follows:
CSS:

  1. .cols{
  2. width:44em;
  3. margin :auto;
  4. text-align:center;/* centers inline-blocks*/
  5. border:1px solid #000;
  6. padding:10px;
  7. }
  8. .cols div {
  9. display:-moz-inline-box;/* Firefox 2 and under*/
  10. display:inline-block;/* FF3, Opera, Safari */
  11. width:12em;
  12. margin:0 1em 0 0;/* need to remove top and bottom margin from p element*/
  13. padding:0.5em;
  14. border:1px solid #009;
  15. vertical-align:bottom;/* align to bottom */
  16. background:#f00;
  17. }
  18. .cols div.last{margin:0}/* remove right margin from last element so that they are all centered*/
  19. .cols div p{width:11em}

HTML:

  1. <div class="cols">
  2.     <div>
  3.         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc commodo lorem ut justo.</p>
  4.     </div>
  5.     <div>
  6.         <p>Ut molestie libero quis massa elementum tristique. Aliquam erat volutpat.</p>
  7.     </div>
  8.     <div class="last">
  9.         <p>Duis purus diam, gravida et, mattis eget, semper ac, tellus. Suspendisse velit nunc, varius ut, pharetra malesuada, suscipit ut, lacus.</p>
  10.     </div>
  11. </div>

With the changes in place our layout now clicks back into position and looks exactly as Figure 1 with all blocks aligned as expected.

Now with Firefox 2 looking pretty good we turn our attention to our favorite browser: Internet Explorer.

IE has partial support for inline-block but only supports it on elements that are naturally inline by default. What a waste as it’s usually block elements you want to change!

It is actually the case that inline elements just need “haslayout” and they will automatically behave as inline-block elements. They don’t in fact need display:inline-block at all and applying the proprietary zoom:1.0 will have the same effect as specifying inline-block. The “haslayout” trigger must be one that applies to inline elements as width and height won’t do as they are only “haslayout” triggers for block elements.

Therefore to make an anchor display as inline-block you only need to specify this.

  1. a {display:inline-block}

Or

  1. a{zoom:1.0}

So we have established that we can make inline elements obey inline-block rules but what do we do for block level elements?

It turns out that you can also make block level elements behave as if they are inline-block elements by setting a property that will ensure the element is in “haslayout” mode but it must be a valid “haslayout” trigger for an inline element because we will be setting the element to inline in the final stage of the technique. Once “haslayout is set then in a separate rule we apply display:inline to complete the effect. Note that the order of the rules is important and the display:inline must follow the original “haslayout” trigger but in a separate rule.

As mentioned above the “haslayout” trigger has to be one of the properties that cause “haslayout” to be true for inline elements therefore we can’t use the block level triggers because the element is now inline which is why height and width will not be “haslayout” triggers for our new inline element as mentioned above.

So what properties apply to inline elements that will trigger “haslayout”?

The MSDN site has a list of available properties and we will need to choose from this list.

We could use display:inline-block because that is a “haslayout” trigger for inline elements but if we apply it in the same rule then that will over-rule the display:inline setting and all we get is an element with “haslayout” but not inline block. We could use zoom:1.0 in the same rule and that would create an inline-block element.

e.g.

  1. div.test{
  2. display:inline;
  3. zoom:1.0;
  4. }

However as zoom is proprietary (non-valid) IE only code we can use another method which utilizes display:inline-block. The only caveat is that as mentioned before we must specify it in a separate rule so we don’t cancel out the display:inline effect.

  1. div.test{
  2. display:inline-block;
  3. }
  4. div.test{
  5. display:inline
  6. }
  7. /* this order is important*/

I should re-iterate that all we are doing here is creating an inline element with “haslayout”. The display:inline-block is only incidental in that it is applying “haslayout” and as shown above the zoom property could be used to similar effect.

Whew – did you get all that?

Armed with the knowledge above we can re-vamp our code to cater for IE7 and under. IE8 supports display:inline-block properly (as far as I can tell) so we will use conditional comments to pass the values to only IE7 and under.

The revised code is as follows.
CSS

  1. .cols{
  2. width:44em;
  3. margin :auto;
  4. text-align:center;/* centers inline-blocks*/
  5. border:1px solid #000;
  6. padding:10px;
  7. }
  8. .cols div {
  9. display:-moz-inline-box;/* Firefox 2 and under*/
  10. display:inline-block;/* FF3, Opera, Safari */
  11. width:12em;
  12. margin:0 1em 0 0;/* need to remove top and bottom margin from p element*/
  13. padding:0.5em;
  14. border:1px solid #009;
  15. vertical-align:bottom;/* align to bottom */
  16. background:#f00;
  17. }
  18. .cols div.last{margin:0}/* remove right margin from last element so that they are all centered*/
  19. .cols div p{width:11em}

IE Html:

  1. <!--[if lt IE 8]>
  2. <style type="text/css">
  3. .cols div{display:inline}
  4. </style>
  5. <![endif]-->

Main Html:

  1. <div class="cols">
  2.     <div>
  3.         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc commodo lorem ut justo.</p>
  4.     </div>
  5.     <div>
  6.         <p>Ut molestie libero quis massa elementum tristique. Aliquam erat volutpat.</p>
  7.     </div>
  8.     <div class="last">
  9.         <p>Duis purus diam, gravida et, mattis eget, semper ac, tellus. Suspendisse velit nunc, varius ut, pharetra malesuada, suscipit ut, lacus.</p>
  10.     </div>
  11. </div>

That just about wraps it up and we now have blocks aligned in most browsers. Please refer to the full demo for the complete code as the CSS is all in the head (just view source).

I hope you’ve enjoyed this little foray into the wonderful world of IE and now you can all get back inline.

39 Responses to “Let’s All Get Inline (In a Block, In a Block)”

1 Harmen Janssen

Wow, I didn’t know inline-block was this widely supported yet!
Thanks for the easy-to-follow tutorial and outlining the browser differences.
It’s good to know inline-block is finally mature enough to implement in client sites.

2 John

So it doesn’t matter that the IE CC which sets the element to display: inline comes after the main rule which sets it to display: inline-block?

It’ll be interesting to see how quickly numbers using FF2 drop off as you’d expect FF users to be more likely to upgrade. My own site shows about 35% using FF3 and 17% using FF2.

3 Andrei

Nicely done. I have played some time ago with inline-block, but didn’t manage to get an equal cross-browser rendering.

Also interesting thing to note that haslayout behaves differently on block vs inline elements (i am not sure about this, nor do i see why it should behave differently, i’ll look into the matter more closely).

Thanks for the insight

4 dougwig

Nice!

I look forward to applying this technique to vertically center a string of inline elements —images, spans, inputs, labels, etc within a “line-box”.

Would be nice to give the floats a rest!

5 Golgotha

Thanks Paul, that clears things up.

6 Paul OB

@John: The display:inline rule must follow the display:inline-block rule and must be in a separate rule or it doesn’t work properly due to the conflict of using the same display property. Although it partially works in reverse the effect is not the same.

Setting display-inline and using zoom as a haslayout trigger is a much simpler method as all styles can remain in the same block because there are no conflicts between the properties.

7 kabin

the conflict of using the same display property.

8 dir

that haslayout behaves differently on block vs inline elements (i am not sure about)

9 Paul OB

@dir _ What are you not sure about?

A haslayout trigger will only apply to the element if the element understands the property being applied.

For example “height” and width” are haslayout triggers but for inline elements height and width don’t apply so they will not trigger “haslayout” on inline elements.

Applying haslayout to a block elements will not make it behave like an inline-block. Applying haslayout to inline elements will make them behave like inline-block elements.

Therefore “haslayout” does affect inline and block elements in a different manner.

10 konteyner

i see why it should behave differently. to inline elements will make them behave like block-inline elemented.

11 Kravvitz

I wasn’t aware that hasLayout had different triggers on inline and block level elements, but with a little testing in IE6 and IE7 with the IE Dev Toolbar, Paul seems to be right (as usual :) ).

Thanks for explaining this, Paul. I’ll be sure to add a link to this page on each of the two demo pages on my site that demonstrate this technique.

By the way, I have a new blog on my site.

[...] Let’s All Get Inline (In a Block, In a Block) [...]

13 BrightBold

This is a great article – you lay everything out very clearly.

After the line: “…we must specify it in a separate rule so we don’t cancel out the display:inline effect,” you should reverse the order of the two rules in the CSS example. That made me think the “display:inline” rule needed to come first, and I couldn’t figure out why my code wasn’t working until I read the comments and saw I had it reversed.

(And yes, I know it’s better to have that rule in the IE conditional stylesheet, but I didn’t put it there because I thought that rule needed to load first!)

Thanks for this clear and thorough explanation.

14 Paul OB

Thanks for your comments, I have edited the article to take your comments into account :)

15 John Middlemas

If you are using IE8 with your code then you need to use a !DOCTYPE declaration. Without that it will not display correctly at all. Firefox does not have this problem and displays correctly in both quirks mode and standards mode.

If you don’t want to have a !DOCTYPE declaration then altering your code to the following does the trick:-

16 Paul OB

@John, The demo does already have a full doctype (http://www.pmob.co.uk/search-this/inline-block-example2.htm).

I would always advise to use a full doctype anyway or all versions of IE revert to quirks mode and then all bets are off.:)

All my articles assume that valid code and full doctypes (with uri) are in effect.

Thanks for mentioning it anyway in case it wasn’t clear.

17 dinesh

Thanks for this clear and understanding inline-block.

I need a good example using haslayout trigger.

for example
zoom:1

18 Paul OB

Hi Dinesh thanks for your comments.

Were you asking another question there or have I misunderstood :)

19 prefabrik

Thanks you very much, they are wonderful!

20 mill

Setting display-inline and using zoom as a haslayout trigger is a much simpler method as all styles can remain in the same block because there are no conflicts between the properties.

21 haberleri

Thanks for this clear and understanding inline-block.

I need a good example using haslayout trigger.

22 Paul OB

@haberleri: Please clarify the question and we’ll try to help.

23 traverten

thank you very very much for it

24 ofis koltuklari

Hi Dinesh thanks for your comments.

Were you asking another question there

25 mermer lavabo

The second type of reader is a JavaScript developer, already versed in another library, now trying to quickly learn jQuery. The third reader is myself, the

26 sam freda

this is really great stuff about blocks, blocks are great overall.

27 hazır beton

Setting display-inline and using zoom as a haslayout trigger is a much simpler method as all styles can remain in the same block because there are no conflicts between the properties.

28 Paul OB

@hazir: Yes that is mentioned in the article and is the method I use (if the client doesn’t mind invalid css) ;).

[...] You have explained me before display inline and display block … what is display inline-block? Its a cross between a block level element and in inline element. It makes both block and inline elements behave as [...]

30 css help for a rookie... - SitePoint Forums

[...] images and captions but the same technique would be used for a menu. You can find more about the technique here. If you can't work it out then post your existing code and we'll try and help you fit it in place. [...]

[...] to ie5.5 except that you need the hack I showed and in the order I showed. You can read more on inline-block here. __________________ http://www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles Ultimate CSS [...]

32 CSS Dropdown menu possbilities - SitePoint Forums

[...] in IE7 and it works just fine. It is incomplete but the code I added fixes it perfectly. It's explained here. [...]

33 Resim

Old but wonderful post. This is very precious content. Thanks again.

34 cambalkon

The truth is you could not do this automatically with floats at all as you could never align the bottom borders unless you were using fixed heights and then could calculate the margins for each. It is also very difficult to center floats also. With very little code we have achieved this effect so now we will get down to specific details.

35 Prefabrik

Great title. the same block because there are no conflicts between the properties.

37 Deovrat

The post is really very wonderful!!

‘display’ property also does not remove the element from the normal flow like ‘float’ property.

It helped a lot.

Thank You Very Very Much!

38 owen

when I add
display:-moz-inline-box;
display:inline-block; to my property (#site-title a)the non-gecko browsers answer to display:-moz-inline-box; and because they don’t understand the property they ignore it so display:inline-block; doesn’t work! Can anyone help

39 Paul OB

Hi owen,

You must have a typo or something else going on because as you can see by the demos it works fine with those rules.

display:-moz-inline-box is only seen by gecko browsers anyway so will not be actioned by any other browsers unless you have malformed it in some way.

This article is over 5 years old now so you can safely remove the display:-moz-inline-box anyway as I doubt there are any browsers out there that need it today.

Refer to the demo to see it working and then check your code matches or if you can’t get it to work post a link to he problem.

mulberry sale spyder womens jacket cheap new balance 574 mulberry outlet cheap new balance 574 arcteryx outlet mulberry sale spyder womens jacket mulberry sale spyder womens jacket mulberry outlet mulberry outlet new balance 574

Popular Articles

Top 10 Commentators


Subscribe to this feed! Subscribe by Email!

Random Bits Podcast

You need to download the Flash player from Adobe

Blogs Worth Reading