Alan Gresley wrote:

You cannot reproduce this with floats strictly speaking.

Key point here is height:1*;

menu li { display: block; /* menu items are blocks*/ height:1*; /* all items in the menu bar have the same height */ padding:2px 4px; }

height:1*; means that all li's will have the same height - height of content of the menu (minus that vertical paddings).

And if you say: menu li { display: block; /* menu items are blocks*/ margin-top:1*; } then all elements will be aligned to the bottom of the container.

Floats simply have no concept of vertical alignment.

If you need to wrap such blocks on multiple rows then you will use:

menu { flow: horizontal-flow; }

that will create as many row boxes as needed to show its content in full for the given width. Height of each row box is maximum height of elements in the row. Thus you can vertically align elements in these rows too.

There is also such thing as menu { flow: vertical-flow; } that will do the same but in vertical direction - children will form columns expanding width of the container.

http://terrainformatica.com