The CSS3 Flexible box model in action

This demo show a web site layout fully made thanks to this new box model.

Positioning Articles

The articles above are vertically displayed following the HTML order.

Positioning Form Fields

All the form fields are displayed without any float property. It make the forms layouts easier to build and much more consistant.

Article Always On Top

This article is always placed on top by using a simple class declaration. Its positionning is not locked to the HTML flow, it only depend on the author wish. The same technique is used to highlight a link on the sidebar.

Browser Compliance

This page will be correctly render with Firefox, Safari, chrome and any browser which use the Gecko or Webkit rendering engine.

Positioning Footer

The flexible box model is ideal to solve a common problem in webdesign : to stick the footer on the bottom of the page if there is not enough content (you need a big screen to check this out).