Is that possible to display divs next to each other without floating ?

Question

I want to put several divs next to each other (in one row). All divs have the same height.

Here is how this can be done using float: left.

Is that can be done without using float ?

Answer 1

You could use display:inline-block. But unfortunately some browsers (some IE versions) don't support it.

http://www.brunildo.org/test/inline-block.html

http://www.quirksmode.org/css/display.html

Answer 2

a display: block element is (effectively) going to have a line break at the end. One option that will let you keep block element styles, while putting it in the pageflow is set display: inline-block (of course, with some additional work to get ie behaving)

Another option is to nest them, set them all to position: relative, and use the left rule to align them.

Answer 3

Depends, on what you want to do. You can use display: inline-block;

http://jsfiddle.net/sygL9/