Web Matters

CSS Layout Example 2

This page was inspired by a comment in the comp.infosystems.www.authoring.html Usenet group, that:

1 fixed 2 (percent) fluid layout is impossible in CSS. The perfect, and perhaps ironic, example is mozilla.org's layout. You cannot have a fixed menu with 2 equal spaced columns taking the rest of the space. It is impossible.

This page proves that not only this layout is perfectly possible but, even better, in really small windows (e.g. PDA's) the two fluid columns will float under one another. It also throws in a header and footer for good measure. It has been tested in Opera 6, Opera 7, Mozilla 1.1 and IE 6 (all on Windows). It doesn't in its current form work in IE 5, due to IE 5's erroneous box model, but could probably be made to work by applying one of the well-known CSS-hiding hacks.

This column fills half the remaining width. You can see from the line breaks that it is the same width as the next column.

Loren ipsum equalla enad masat pera unasidilla twetro quave klimera fragat spetsos. Ipsum equalla enad masat pera unasidilla twetro quave klimera fragat spetsos. Loren ipsum equalla enad masat pera unasidilla twetro quave klimera fragat en spetsos. Loren ipsum equalla enad masat pera. Unasidilla twetro a klimera fragat spetsos. Loren ipsum equalla enad masat pera unasidilla twetro quave klimera fragat spetsos. Loren ipsum equalla enad masat pera unasidilla twetro quave klimera fragat spetsos.

This column fills half the remaining width, unless the window is small, in which case it floats under the other column.

Loren ipsum equalla enad masat pera unasidilla twetro quave klimera fragat spetsos. Ipsum equalla enad masat pera unasidilla twetro quave klimera fragat spetsos. Loren ipsum equalla enad masat pera unasidilla twetro quave klimera fragat en spetsos. Loren ipsum equalla enad masat pera. Unasidilla twetro a klimera fragat spetsos. Loren ipsum equalla enad masat pera unasidilla twetro quave klimera fragat spetsos. Loren ipsum equalla enad masat pera unasidilla twetro quave klimera fragat spetsos.