Elastic Faux Columns

Faruk Ates was ask­ing what people wanted him to write about, amongst the list was faux elastic columns and see­ing I first used them almost two years ago for for work and know my way around them, I would much rather read Faruk on CSS: how Douglas Bow­man taught me optimal themeing tech­niques or FACE: how can we make good use of FACE to truly enhance usab­il­ity, so this is my attempt to get my way.

If you want to skip to the demos here are two column and three column ver­sion, just use the Big­ger text,Smal­ler text,More textandLess text to show the true elastic nature of the lay­outs. Note if you are using Safari 1.3 or earlier, the back­ground images do not dis­play cor­rectly due to a bug with Safari, this is explained below

The Code

The struc­ture looks like this:

<div id="container" style="width :57em; border: 1px solid #000; padding: 0; margin: 0; background: #eee url(whiteback.gif) 19em 0 repeat-y; float: left; text-align: left; ">
  <div id="header" style="background-color:#f90; border-bottom: 1px solid #000; margin: 0; padding: 0 0 0 1em;">
    Header
  </div>
  <div id="background" style="background: url(fff5e5back400.gif) 38em 0 repeat-y; float: left; width :57em;">
    <div id="columnone" style="float: left; width: 17em; margin-left: 1em; position: relative;">
      Column One
    </div>
    <div id="columntwo" style="float: left; width: 17em; margin-left: 2em">
      Column Two
    </div>
    <div id="columnThree" style="float: right; margin-right: 1em; width: 17em;">
      Column Three
    </div>
  </div>
  <div id="footer" style="clear: both; background-color:#ccc; margin-bottom: 0; padding: 0 0 0 1em; margin: 0; border-top: 1px solid #000; border-bottom: 1px solid #eee;">
    Footer
  </div>
</div>


The import­ant parts for faux elastic columns are in the back­ground declar­a­tion for the con­tainer div:

• #eee which is the back­ground col­our of the left hand column.
• url(whiteback.gif) a wider than the column will ever be and 1px high back­ground image for column two
• 19em 0the pos­i­tion from the left 19em and top 0, that the back­ground image starts for column two
• repeat-y repeats the back­ground image for the second column the full length of the page, no mat­ter which column is longer

The other import­ant div for the faux columns on a three column lay­out is back­ground. This div, needs to be inside the con­tainer div, it does not need to con­tain the footer or header divs, but can. It just needs to con­tain all the column divs. It can also be repeated for a four, five or even more faux column effect. The back­ground declaration:

• color not declared, the default is transparent.
• url(fff5e5back400.gif) another wider than the column will ever be and 1px high back­ground image for column three
• 38em 0the pos­i­tion from the left 38em and top 0, that the back­ground image starts for column three
• repeat-y repeats the back­ground image for the third column the full length of the page, no mat­ter which column is longer

If you want a repeat­ing back­ground pat­tern for column one, use that as you back­ground image in the con­tainer div, and put the back­ground image for column two in the first back­ground div and the back­ground for column three in the second back­ground div, etc.

The tech­nique is fairly simple, ensure all columns are wrapped inside the con­tainer divs, and then give each con­tainer div a back­ground for the columns start­ing from the left.

The Trouble with Safari

Unfor­tu­nately there is a bug in Safari 1.3 and earlier ver­sions which causes prob­lems with back­ground images, except when the back­ground fits exactly inside the con­tain­ing div.

If the back­ground image is wider than the column but not wider than the con­tainer div, it will over­flow the container

If the back­ground image is wider than the column and wider than the con­tainer div, (or the back­ground is repeat­ing on the x-axis) it will fill the container.

As you can see from the above examples it pays to be care­ful about the choice of back­ground images and col­ours. In two column design I use very subtle changes in col­our with a strong bor­der using a very wide image or do as I would with a mul­tiple column lay­out and do not use back­ground col­ours and use thin images (a few pixels wide) to seper­ate the columns visually.

This entry was posted on Tuesday, December 27th, 2005 at 6:06 pm and is filed under css and html, elastic design . You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.