Sunday, February 22nd, 2009

Cross-Browser Inline-Block

Category: Articles, Examples, Showcase

>Ryan Doherty has one of those really nice articles that walk you through how to do something that should be easy in CSS but isn’t, until you know how: Cross Browser Inline Block.

By the end of it all you will have this:

  1. <style>
  2.     li {
  3.         width: 200px;
  4.         min-height: 250px;
  5.         border: 1px solid #000;
  6.         display: -moz-inline-stack;
  7.         display: inline-block;
  8.         vertical-align: top;
  9.         margin: 5px;
  10.         zoom: 1;
  11.         *display: inline;
  12.         _height: 250px;
  13.     }
  14. </style>
  15.  
  16. <li>
  17.         <div>
  18.             <h4>This is awesome</h4>
  19.             <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
  20.            alt="lobster" width="75" height="75"/>
  21.         </div>
  22. </li>

which gets you the following reliably in many browsers:

Along the way you will learn about more IE star hacks, fun with hasLayout, use XUL stacks to help Firefox 2 along, and more. Very nice job Ryan.

Related Content:

Posted by Dion Almaer at 5:04 am
11 Comments

++++-
4.1 rating from 50 votes

11 Comments »

Comments feed TrackBack URI

More people should learn this instead of using floats.

Comment by Jordan1 — February 22, 2009

Looks just like Dijit’s .dijitInline class:

http://bugs.dojotoolkit.org/browser/dijit/trunk/themes/dijit.css#L25

Comment by phiggins — February 22, 2009

Nice, but works only because it have fixed width and height, and those inline-blocks aren’t links. When you want shrinked-fit width in Firefox 2 (especially with links) you are in trouble.

Comment by GreLI — February 22, 2009

Darn @phiggins! You beat me to it! :-)
@GreLi: use display:-moz-inline-boxinstead of display:-moz-inline-stack to shrink-wrap in FF2.

Comment by unscriptable — February 22, 2009

Mmm. But if all you have in that container is a set of inline block elements, then what’s the difference between that and floating them all left?

Comment by ExtAnimal — February 23, 2009

@ExtAnimal: did you read the article? It explains how if an element has slightly more stuff in it and expands vertically, the next line of elements will float against that larger element.

Comment by tj111 — February 23, 2009

inline-block is better than float:left because you don’t have to clear it afterwards. I wish I knew about this earlier than the last few months but it’s really cool. It seems to be much more supported cross-browser (read IE6) when used on elements that are normally inline, like links or spans etc

Comment by starkraving — February 24, 2009

@starkraving: IE6 treats the following roughly the same:

InlineElement {
display: inline-block;
}

and
BlockElement {
display: inline;
zoom: 1;
}

Comment by eyelidlessness — February 24, 2009

Yeah, it’s a good technique. I left a comment with a similar demo when the CSS vs Tables nonsense was going on again last year : http://ajaxian.com/archives/css-and-tables-the-war-continues#comment-269059

Not enough people know about this and only think about floats. But for l flexible grid layout without tables this can often be the solution.

Comment by edeverett — February 24, 2009

Hedger Wang also has a couple of nice posts about this topic:
http://blog.hedgerwow.com/2007/11/14/item-list-grid-real-world-practice-with-displayinline-block-across-browsers/
http://www.hedgerwow.com/360/dhtml/css-layout-gridview.html

Comment by LeifOO — February 28, 2009

If you know that you will always display 4 items per row, you could simply wrap a DIV around them (the 4 items per row). This will achieve the same thing w/o doing all the hacks. You just float the items and clear the outer DIVs. However, if you have a liquid layout and you can’t guarantee the number of cells per row, then this is a pretty nice work around. Then again, if you are comparing this to a TABLE layout approach, you need to know ahead of time how many cells you want to display per row. In which case, I choose the DIV wrapping approach over this.

Comment by i8ramin — March 1, 2009

Leave a comment

You must be logged in to post a comment.