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.


  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 –

    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


  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

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

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