What do you want to learn today?
Treehouse is the best place to learn web design, web development, and iOS.

Code Snippet

Home » Code Snippets » CSS » Cross Browser Inline-Block

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.

Subscribe to The Thread

  1. Anton

    Thank you

    Reply ↓
  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.

    Reply ↓
  3. bogdan

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

    Reply ↓
  4. Striker

    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.

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~