display: inline-block Test Page

This is an example for this weblog post. Created by Thiemo Mättig, 2007-08-02.

Tested with Internet Explorer 6 and Opera 9. Does not work in Firefox 2. Update: Works with Firefox 3.0 and higher.

First, here are some examples what you can do with display: inline-block without using float.

Example image This is the image description which spans a lot more than one line. Example image This is the image description which spans a lot more than one line. Example image This is the image description which spans a lot more than one line.

What is display: inline?

This is an example text. This is an inline box with a lot of text inside. This is an inline box with a lot of text inside. This is an inline box with a lot of text inside. This is an inline box with a lot of text inside. This is an inline box with a lot of text inside. This is some more example text. This is some more example text. This is some more example text. This is some more example text.

What is display: block?

This is an example text. This is an example text. This is an example text. This is an example text. This is an example text. This is an example text.
This is a block box with a lot of text inside. This is a block box with a lot of text inside. This is an inline box which spans more than one line. This is an inline box which spans more than one line. This is a block box with a lot of text inside. This is a block box with a lot of text inside.
This is some more example text. This is some more example text. This is some more example text. This is some more example text. This is some more example text.

What is display: inline-block?

This is an example text. This is an example text. This is an example text. This is an example text. This is an example text. This is an inline-block box with a lot of text inside. This is an inline-block box with a lot of text inside. This is an inline box which spans more than one line. This is an inline box which spans more than one line. This is an inline-block box with a lot of text inside. This is an inline-block box with a lot of text inside. This is some more example text. This is some more example text. This is some more example text.