Basic “fluid–fixed–fluid” layout for bored web-designers
Home on the range...
Welcome to this quite ordinary-looking but slightly unusually-acting test page.
This page can cope with quite a bit of font-resizing and other user-imposed conditions in the following browsers:
- Opera
- Gecko (Mozilla, Firefox etc)
- Safari
- Internet Explorer 6
It will also survive to a degree in:
- Internet Explorer 5.2.3 /Mac
I don't know how much this layout can take, or what it will look like, in other browsers. It definitely isn't made to survive in older versions of any browser.
Note: I wouldn't use this layout for anything serious, the way it is now. However, it is functional and may be used as base for further development.
© 2005 ?
Both side-columns are dimensioned using '%' units, while center-column is dimensioned using 'px'. This leads to perfectly fluid width of side-columns, while center-column has a fixed width.
Each side-column is a float that has a negative backside margin slightly larger than half the width of the center-column. That creates space for the center-column, and the rest is basic margin-adjustments and some z-index to make the right parts stay on top.
The result is that there's no float-drop or strange breaking of layout when users apply their preferences to this page. Even IE/win may play well with a little help and a few odd values.