Grow your CSS skills. Land your dream job.

Last updated on:

Cross Browser Inline-Block

li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        zoom: 1;
        *display: inline;
        _height: 250px;
}

Reference/Explanation here and here.

Comments

  1. Anton
    Permalink to comment#

    Thank you

  2. Inline-block come in really handy for form layouts (applied to labels, inputs, error spans). Works brilliantly in IE6+, Mozilla 3.6+, Safari, Chrome, etc.

  3. bogdan

    This is very useful hack! It’s much better than floating li items. Thank you.

  4. Striker
    Permalink to comment#

    If you want to avoid nasty CSS hacks and don’t care about IE6 (which you shouldn’t), you can ensure proper inline-block handling in all browsers if you use a tag that has a default display of inline (other than the <p> tag).

    So tags such as <span>, <b>, <s>, <q>, <u>, <i>, or <a> work perfectly in all browsers if you apply display:inline-block to them.
    I recommend <span> because it’s semantically similar to <div>.

    Just remember that whitespace between inline-blocks is rendered just like it is between text.

    Click here to see a demo and test it in various browsers.

  5. Trev
    Permalink to comment#

    I gotta say, your site is very useful, I end up here frequently, also the css frog rules.

    Not ready to share my site yet, perhaps when It’s a little more finished!

  6. Amit
    Permalink to comment#

    Hi there, any known issues with inline-block with Chrome, look at this weird behaviour I have found at the new beta version of WordPress 2012 – http://wordpress.org/support/topic/twentytwelve-nav?replies=17

    Any suggestions or ideas anyone ?

  7. sataj
    Permalink to comment#

    want this with divs

  8. I’ve ended up adding white-space: nowrap; to my inline-block mixin to fix a issue I was having in Chrome on Android with some <li> breaking onto another line for no apparent reason

  9. vishal
    Permalink to comment#

    What does mean by display:inline means what does means of “” to put before any property

    Thanks

  10. Matt
    Permalink to comment#

    Considering it’s September 2014, is it reasonable to simply do: “display: inline-block;” if you aren’t required to support older browsers?

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".