display: inline-block

Works (more or less) in: IE5+/Win, IE5/Mac, Op7+, Saf, Gecko 1.9+. Many differences in vertical-align interpretation.

Note: The first series of tests (A, B, C) have not valid HTML, since a span element is used as inline-block and there is an ul inside. This is for testing purpose, since with a span IE7-/Win works more "easily" (see below, and IE/Win: inline-block and hasLayout.) Most browsers work as desired even with the not valid HTML.

Series A: Widthless inline-block spans, together with text

A1. inline-block span, no vertical-align specified

A2. inline-block span with vertical-align: top

A3. inline-block span with vertical-align: bottom

A4. inline-block span with vertical-align: middle

A5. inline-block span with vertical-align: baseline

Series B: inline-block spans having assigned width, together with text

This is like series A but with an assigned width on the inline-blocks. IE5/Mac works better: without a width the inline-block stretches to the full available width when it contains widthless block elements (and in other conditions) instead of shrink-wrapping the content.

B1. inline-block span with assigned width, no vertical-align specified

B2. inline-block span with assigned width and vertical-align: top

B3. inline-block span with assigned width and vertical-align: bottom

B4. inline-block span with assigned width and vertical-align: middle

B5. inline-block span with assigned width and vertical-align: baseline

Series C: inline-block spans containing assigned width contents

This is like series A but with an assigned width on the contents of the inline-blocks. IE5/Mac works better (the inline-blocks shrink-wrap the content.)

C1. inline-block span with assigned width contents, no vertical-align specified

C2. inline-block span with assigned width contents and vertical-align: top

C3. inline-block span with assigned width contents and vertical-align: bottom

C4. inline-block span with assigned width contents and vertical-align: middle

C5. inline-block span with assigned width contents and vertical-align: baseline

Series D: Widthless divs with display:inline-block, together with text

This is like series A, but with div in place of span (and so valid HTML.) In IE7-/Win inline-block applied to a block element doesn't work (or, better, does not have the expected effect, see below and IE/Win: inline-block and hasLayout)

D1. inline-block div, no vertical-align specified

D2. inline-block div with vertical-align: top

D3. inline-block div with vertical-align: bottom

D4. inline-block div with vertical-align: middle

D5. inline-block divs with vertical-align: baseline

Series E: Some divs with display inline-block, and display:inline plus hasLayout for IE7-/Win

The combination display:inline + hasLayout produces in IE7-/Win an inline-block "effect" (on any element, see IE/Win: inline-block and hasLayout), so this is like series D, but now working in IE7-/Win.

E1. inline(-block) div, no vertical-align specified

E2. inline(-block) div with vertical-align: top

E3. inline(-block) div with vertical-align: bottom

E4. inline(-block) div with vertical-align: middle

E5. inline(-block) div with vertical-align: baseline

Series F: Like series E, but with an assigned width on the inline-blocks

(good for IE5/Mac)

F1. inline(-block) div with assigned width, no vertical-align specified

F2. inline(-block) div with assigned width and vertical-align: top

F3. inline(-block) div with assigned width and vertical-align: bottom

F4. inline(-block) div with assigned width and vertical-align: middle

F5. inline(-block) div assigned width and vertical-align: baseline

Series G: Like series E, but with assigned width on the contents of the inline-blocks

(good for IE5/Mac)

G1. (inline-)block div with assigned width contents, no vertical-align specified

G2. (inline-)block div with assigned width contents and vertical-align: top

G3. (inline-)block div with assigned width contents and vertical-align: bottom

G4. (inline-)block div with assigned width contents and vertical-align: middle

G5. (inline-)block div with assigned width contents and vertical-align: baseline

CSS tests home