Item List Grid : Real world practice with display:inline block across browsers

one of my co-workers asked the way to deploy grid-like layout for list-item with nice alignment and visual treatment.
Apparently a more flexible design and layout will make this better and old school CSS solution such as “float:left” won’thelp in the case.

I had a very simple prototype on :

you may try to adjust the font-size, window-size and see how this fluid layout adjust to your best-view-size and still keeps the UI looks nice and aligned well.

BTW, in case you may not notice the very inconvenient truth. Some might think that block Element s such as DIV does not get display:inline-block on Internet Explorer. This may not be true.

Here’s how do I implement display:inline-block across browsers:


display:-moz-inline-stack;/*Firefox need this to simulate display:inline-block*/
display:inline-block; /*IE does not apply this to Block Element, and Firefox does not render this, too*/
_overflow:hidden;/*fix IE6 to expanded content*/
zoom:1;/*trigger hasLayout*/
*display:inline;/*once hasLayout is true, set display:inline to block element will make display:inline behave like display:inline-block*/