CSS / 3 columns / header / footer

no javascript, no table, no image

A few layout tests with CSS.

Code compatible with recent browsers and:

  • MSIE 5, 5.5 and 6. Text size: Medium
  • Mozilla, Firefox, Galeon, Epiphany, K-meleon, Netscape 6, 7 (except popup), Netscape 7.2 and 8.
  • Opera 6 (except popup), 7, 8 and 9.
  • Konqueror 3.2.
  • Safari 1.2.

Some CSS layouts need "hacks" either for a specific Mozilla value or for a few MSIE oddities.
The code uses "hacks" even if avoiding them is the best solution.

Each page has its own style sheet and uses different techniques for the menu.


The popups of the notes depend on the available fonts disponibles and on screen size.

Note 2This column displays the content. It can display text and/or images.
When this column gets longer, as the popup shows it, all the columns get longer too.

This page specifies sizes in em.
MSIE displaying it correctly in mode "medium size" for the text, a few hacks have been added for a better compatibility.

The same content -with one filter and a different HTML code- is here.

The same content -with the last version of the generator- is here.

Note 3This column displays the comments or the links. It can display text and/or images.
When this column gets longer, as the popup shows it, all the columns get longer too.

visits: 497106
at 17:45:06 utc+ on Fri May 30, 2025

Site map

W3C XHTML 1.0
W3C CSS