Sunday, February 22nd, 2009
Cross-Browser Inline-Block
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:
HTML:
-
-
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;
-
}
-
</style>
-
-
<h4>This is awesome</h4>
-
<img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
-
alt="lobster" width="75" height="75"/>
-
</div>
-
</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.
4.2 rating from 45 votes
More people should learn this instead of using floats.
Looks just like Dijit’s .dijitInline class:
http://bugs.dojotoolkit.org/browser/dijit/trunk/themes/dijit.css#L25
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.
Darn @phiggins! You beat me to it! :-)
@GreLi: use display:-moz-inline-boxinstead of display:-moz-inline-stack to shrink-wrap in FF2.
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?
@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.
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
@starkraving: IE6 treats the following roughly the same:
InlineElement {display: inline-block;
}
and
BlockElement {display: inline;
zoom: 1;
}
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.
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
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.