Pure CSS Question : Flowing layout


Calling all CSS Gurus !

I’ve got a series of divs (which will be Vaadin components, but that’s not relevant right now) and I’d like to lay them out with pure CSS, flowing left-to-right and wrapping on to a new line as needed.

The number of divs/components will be variable.

Each div will have a fixed with, but a variable height.

The container will be resizable - so I won’t know how many columns I have.

I have mocked up the scenario in HTML - with a pure CSS version with float:left, and a version showing what I want using a TABLE.
A picture speaks a thousand words.

Is it possible, just using CSS, to ensure that boxes 4 and 5 start on the new row underneath Box1, and that they align vertically (as shown in the Intended Layout)?

HTML attached.


11559.html (2.14 KB)

display: inline-block; should work fine in that scenario.

So for each div you just set the display property value to “inline-block”. That’ll work in modern browsers, but IE6-7 will require a bit more magic.

You can fake inline-block elements in IE using a “native” inline element (say a SPAN instead of a DIV), and setting display: inline; and zoom: 1; for those elements, if you also specify inline-block after that (IE doesn’t recognize that and reverts to the default display value of the element). If you only specify display: inline, it’ll work on IE with DIV elements as well, so you’ll need to isolate the inline-block property to non-IE browsers.

You may need to set white-space: nowrap; on the containing element, depending on the behavior you need (do you want to specify the line-break position yourself, or let the browser determine it from the element widths).

vertical-align: top; is also needed for all elements, otherwise they will aling to the baseline by default.

So that’s the basic principle, and I actually use this sort of layouting in my WeeLayout add-on to layout components in horizontal direction.

Attached a modified version of your test file, with a comment to isolate the display: inline-block to non-IE browsers only.
11560.html (2.25 KB)

Thanks Jouni! Excellent stuff…

Does your WeeLayout horizontal component support the wrapping-on-to-new-lines, or it “just” a replacement for HorizontalLayout?


Edit: The context is that I am currently mocking up in pure HTML, but will ultimately be implementing components/view in Vaadin

You should be able to override the white-space property using CSS, and it should in theory work as expected. So maybe this problem is already solved for you :slight_smile:

I shall find out in time!

For what it’s worth, and in case anyone else stumbles on this at a later date, you can use the
Star (property) hack
to have one CSS rule to support IE7 and other browsers :

display: inline-block;  /*for IE8 and all non-IE browsers */
*display: inline; /* IE7 and earlier */
zoom: 1;



Hi Charles,

Vaadin adds class names like v-ie6 and v-ff3 to the body element. So you can use these class names in your selectors instead of those hacks. Makes your CSS more readable. So you can say for example:

.v-mycomponent {
	display: inline-block;	

.v-ie6 .v-mycomponent,
.v-ie7 .v-mycomponent {
	display: inline;
	zoom: 1;