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.

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;

created: