layout.css

Tests the styles found in layout.css. First up...

This technique is not ready for use. FireFox has some major problems: it doesn't allow boxes to be positioned or floated, and they can't be laid out by nesting them in other, justified, boxes — or given flexible widths.

.horizontal

Lays children out horizontally, stretched vertically

One
Two
Three
This child has width: 20%;

FF: FireFox does not respond to percentage widths on box children.

.justify_horizontal .horizontal

One
Two
Three
This child has width: 20%;

FF: FireFox does not justify children.

.horizontal.index

.horizontal.divided.index

.vertical

Lays children out vertically, stretched horizontally

One
Two
Three
This child has height: 60%;

FF: FireFox does not respond to percentage heights on box children.

.vertical.index

.vertical.divided.index

.horizontal - absolutely positioned

One
Two
Three
Four

FF: FireFox can't display: box; elements with position: absolute. This is a major drawback.

.horizontal - floated

One
Two
Three
Four

FF: FireFox can't display: box; floated elements. Do we have to wrap everything?

.horizontal - nested layouts

One
Two
Three
Four
Two
Three
Four
One
Two
Three
Four
Two
Three
Four