A Web Design Community curated by Chris Coyier

A little dab'll do ya

Code Snippets

Home » Code Snippets » CSS » Cross Browser Inline-Block Submit one!

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 says:
    03/09/2011 at 7:32 am

    Thank you

    Reply
  2. Nora Brown says:
    05/10/2011 at 6:27 am

    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 says:
    06/03/2011 at 6:54 am

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

    Reply

It's Your Turn

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 ---