CSS Template Layout demos

The following is a list of practical demos on how one might use the W3C's CSS3 Template Layout Module. The rendering is done by a jQuery plug-in, see the blog entry and project page for more information.

Note that these demos are different from less useful technical demos that were originally here. Additional demos and usage information has been made available by Neal Grosskopf.

Demo 1 - Layout 1

The "Holy Grail" layout. Flexible content but fixed-width sidebars.

Show Page Show HTML Show CSS

Demo 1 - Layout 2

Narrow width with one sidebar, full width header and footer.

Show Page Show HTML Show CSS

Demo 1 - Layout 3

Fixed height template with scrollable content, vertically centered navigation

Show Page Show HTML Show CSS

Demo 1 - Layout 4

Vertically structured layout

Show Page Show HTML Show CSS

Demo 1 - Layout 5

Possible mobile/small-screen version

Show Page Show HTML Show CSS