Main Page

This page demonstrates how to lay out a three row and three column page using CSS. Less complex page layouts can hopefully be simply adapted from this. JavaScript has been used to create a floating layout as it is not clear how this can be achieved using pure CSS.

The layout of this page depends upon the size of the content of this central cell. First the browser lays out the page according to the browser size using absolute pixel positioning. If there is sufficient room for the centre content then the page height and hence position of the footer remains static. If this cell overflows then the page expands pushing the footer off the bottom of the window and the browser spawns a vertical scrollbar.

This demonstrator uses CSS to lay out this web page without using tables. JavaScript is used to resize the page so that it floats with the size of the browser and the size of the content.

Follow this link to read more about this demonstrator.