layout

Tests layout styles. First up...

.horizontal

Lays children out horizontally, stretched vertically. Note that children must have no space between them in the html, as they are inline-blocks...

One
Two
Three
This child has width: 20%;

.vertical

Lays children out vertically, stretched horizontally

One
Two
Three
This child has height: 60%;

.central

Centres children of unkown dimensions

Hello.
Are you a mad ferret?
Hello.
Are you a mad ferret?

Opera: fails to support box-pack: center;

FF: Allows children to push the box wider than defined - in WebKit they simply overflow, allowing you to hide them and whatnot. FireFox, frustratingly, breaks display: box; if you try applying overflow, positioning, float, and probably more. Use with caution.

.horizontal.index

.horizontal.divided.index

.vertical.index

.vertical.divided.index

.horizontal - absolutely positioned

One
Two
Three
Four

.horizontal - floated

One
Two
Three
Four

.horizontal - nested layouts

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