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)?
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)
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
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;
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:
