Treehouse: 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. 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 – http://wordpress.org/support/topic/twentytwelve-nav?replies=17

    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

    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

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 in triple backtick fences like this:

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