display: inline-block – aligning blocks in a line

float

inline - block / top

inline - block / middle

inline - block / bottom

Resize the browser window to see the line boxes wrap. The float layout shows floats getting hooked due to float rule 5 and 8. As of this writing, Mozilla needs -moz-inline-box, and IE needs the usual hacking, but works.

stretch bot mid top

The limiting factor of this layout is Opera 8: due to it's broken line-box / vertical-align model, the content of the inline-blocks is not contained.

See Bruno Fassino's inline-block test page.

Created: May 31, 2005, Ingo Chao