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.

exception:

I have organized this very page in such a way that the side-navigation (sideNav) column you should see on the left side of the page is kept outside the "content" wrapper. Thus, if the side-navigation grows taller than all the others, it will only push the footer down and not contribute to the apparent height of the other columns.

This exception is a design-choice, and there are many such design-choices in this page.

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.

I expect most designers in need for such an elastic approach to be more or less fluid in how to manipulate (X)HTML with CSS, so I have just added a few demo-pages where this very page is left unchanged at source-code level and manipulated with CSS. Look for demos in the side-navigation.

Georg

basics for wrapper:

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

Complete CSS found in source-code

created:

  • date: 29. May. 2006
  • by: Georg Sørtun
  • updated: 31. May. 2006
  • updated: 18. Jun. 2006
  • updated: 03. Aug. 2006
  • updated: 05. Aug. 2006
  • updated: 26. Sep. 2006
    (this version)

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.

exception:

I have organized this very page in such a way that the side-navigation (sideNav) column you should see on the left side of the page is kept outside the "content" wrapper. Thus, if the side-navigation grows taller than all the others, it will only push the footer down and not contribute to the apparent height of the other columns.

This exception is a design-choice, and there are many such design-choices in this page.

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.

I expect most designers in need for such an elastic approach to be more or less fluid in how to manipulate (X)HTML with CSS, so I have just added a few demo-pages where this very page is left unchanged at source-code level and manipulated with CSS. Look for demos in the side-navigation.

Georg

Internet Explorer...

Internet Explorer 6 (and older IE/win versions) get a reworked, mode-independent, IE-expression for simulation of 'max-width' relative to User's choice of font-size default, and min-width at Author's chosen value. This approach is described on site in making IE/win work, with IE-expressions.

This layout will work fine in IE6, providing the user's font-size setting is respected and user has activated javascript. Fallback to fixed, em-based or fully liquid width is easily implemented, and is used in this page to set a width of 60em in IE5/Mac.

Important:

This solution does not work in IE6, if there's even the slightest hint of author's font-size choice declared on html, body or wrapper-div. It doesn't matter how author declare font-size on those layout-carrying elements, there simply can't be any declared font-size on those elements since author's choice will replace user's defaults in the IE-expression and mess up the calculation. That's how IE/win works, and it's no use trying to fight it.

There's no such limitation on elements further in, but font-sizes should be defined in '%' of base-font – which is user's default.

float-drop – no thanks...

IE6 (and older versions) is “famous” for dropping floats all over the place if an element runs out of space. That won't easily happen in this layout.

The class "equal" (applied to all floating columns in this page) has an 'overflow-x: hidden' for IE, and all elements inside "equal" is styled 'position: relative'. This will prevent the floats from expanding, while letting all “too large” elements inside those floats overflow – as they do in all standard-compliant browsers.

narrow column:

This column is too narrow for general use, but I think it's ok in this demo/test page.

narrow column:

This column is too narrow for general use, but I think it's ok in this demo/test page.


narrow column:

This column is too narrow for general use, but I think it's ok in this demo/test page.

narrow column:

This column is too narrow for general use, but I think it's ok in this demo/test page.

narrow column:

This column is too narrow for general use, but I think it's ok in this demo/test page.

narrow column:

This column is too narrow for general use, but I think it's ok in this demo/test page.

narrow column:

This column is too narrow for general use, but I think it's ok in this demo/test page.

navigation

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.