CSS at work...

This elastic layout is fully liquid within the limits of given 'min-width' and 'max-width' values, of which the 'max-width' value depends on the User's choice of font-size in his/her own browser.

The layout rely on a wrapper-div with 'width' in percentage, 'max-width' defined in em and 'min-width' defined in px, for supporting browsers.

Container-elements inside the wrapper-div have their widths defined in percentage of the wrapper-div, thus they are self-adjusting.

conditional elastic...

This layout-method use font-size as guide for column-width, but is in no way locked to font-size. User may choose a larger font-size and the layout-width will adjust to it, but only as long as there's room for in in the browser-window. That's one of the conditions.

A minimum-width for the entire page is declared. That's a fixed width, so it won't change with font-size or any other relevant user-setting. The idea is to have some minimum space left for images and other fixed-width elements, while making the layout fit most users own preferences.

equal height columns...

All columns appear to have the same height – as in a HTML table, but this is a float-based “any column longest” design.

A class="equal" is added to columns that shall appear this way, and it simply adds a large amount of 'padding-bottom' and subtracts an equal amount of 'margin-bottom', making the appearance credible in all CSS capable browsers. Some older browser-versions may be left behind for the sake of progress, but they can easily be “saved” by not letting them see this "equal" styles.

design-choices...

We may of course organize the source-code more or less as we like, and float each part into place. We may add borders more or less as we want too, as long as we make sure to subtract any added border-width from the total column-width with a suitable and well-placed negative margin.

Georg

basics for wrapper:

  • width: 99%;
  • max-width: 60em;
  • min-width: 552px;

Complete CSS found in source-code

created:

good behavior confirmed in these browsers:

  • Safari 2.0.3
  • Firefox 1.5.0.3
  • Opera 8.52 & 9.00
  • Netscape 8.1
  • IE6.0.2800
  • IE7.0.05346 beta 2