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.


  1. Anton
    Permalink to comment#

    Thank you

  2. Nora Brown

    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.

    • Jezen Thomas
      Permalink to comment#

      The is a block-level element by default, but good comment otherwise.

    • Jezen Thomas
      Permalink to comment#

      Darnit, HTML disabled. The *paragraph tag* is block-level by default.

    • Chris Marlow

      That would be true except for Firefox 2 which is why the -moz-inline-stack is included

  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 –

    Any suggestions or ideas anyone ?

  7. sataj
    Permalink to comment#

    want this with divs

  8. John Cheesman
    Permalink to comment#

    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


  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?

  11. Gábor
    Permalink to comment#

    I have a problem the inline-block in Chrome and Opera.
    There is the source code: A link.
    There is worked in Chrome and Opera, oddly working in Firefox, it works perfectly in Microsoft Edge in Windows 10, not working Safari. Why now not Working Chrome and Opera? If I overwrite inline-block to block than this working Chrome and Opera, but oddly.
    Thank you very much!

  12. Karina Rode
    Permalink to comment#

    In modern versions of Mozilla display: -moz-inline-stack causes text collapsing in a div, if the code is e.g.:

    <div>img</div> <div>h1 text text</div>

    And the browser doesn’t recognise paddings in that second div as well.
    Beware of that!

  13. Binh Thanh Nguyen
    Permalink to comment#

    Thanks, nice tips

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.