Elastic Faux Columns

Faruk Ates was asking what people wanted him to write about, amongst the list was faux elastic columns and seeing 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 Bowman taught me optimal themeing techniques or FACE: how can we make good use of FACE to truly enhance usability, so this is my attempt to get my way.

If you want to skip to the demos here are two column and three column version, just use the Bigger text,Smaller text,More textandLess text to show the true elastic nature of the layouts. Note if you are using Safari 1.3 or earlier, the background images do not display correctly due to a bug with Safari, this is explained below

The Code

The structure 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 important parts for faux elastic columns are in the background declaration for the container div:

  • #eee which is the background colour of the left hand column.
  • url(whiteback.gif) a wider than the column will ever be and 1px high background image for column two
  • 19em 0the position from the left 19em and top 0, that the background image starts for column two
  • repeat-y repeats the background image for the second column the full length of the page, no matter which column is longer

The other important div for the faux columns on a three column layout is background. This div, needs to be inside the container div, it does not need to contain the footer or header divs, but can. It just needs to contain all the column divs. It can also be repeated for a four, five or even more faux column effect. The background declaration:

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

If you want a repeating background pattern for column one, use that as you background image in the container div, and put the background image for column two in the first background div and the background for column three in the second background div, etc.

The technique is fairly simple, ensure all columns are wrapped inside the container divs, and then give each container div a background for the columns starting from the left.

The Trouble with Safari

Unfortunately there is a bug in Safari 1.3 and earlier versions which causes problems with background images, except when the background fits exactly inside the containing div.

If the background image is wider than the column but not wider than the container div, it will overflow the container

If the background image is wider than the column and wider than the container div, (or the background is repeating on the x-axis) it will fill the container.

As you can see from the above examples it pays to be careful about the choice of background images and colours. In two column design I use very subtle changes in colour with a strong border using a very wide image or do as I would with a multiple column layout and do not use background colours and use thin images (a few pixels wide) to seperate the columns visually.

8 Responses to “Elastic Faux Columns”

  1. Tanny O'Haley Says:

    Other than reducing the size of the background image, have you found a solution to fix the background image overflowing the container div in Safari?

  2. nick Says:

    Tanny, I tried to find a solution to the overflowing background in Safari and never did, but I did not spend a great deal of time on it. Faruk said his solution did not suffer from that problem, so I waited for Faruk to publish the solution. However, Faruk ran off and joined Apple and his blogging declined dramatically. The solution should be in the code of kurafire.net.

    With the redesign of my blog and my new MacBook Pro with Safari 2 displaying the same problem, I will be looking for a solution myself. But that is still a couple of months away at least.

  3. Tanny O'Haley Says:

    Thank you for your quick reply. What I ended up doing is add an extra div. I did not want to clutter up my code, but I couldn’t see any way around it. On the outside div I positioned a background image that is not wider than the div as normal. In the inner div I positioned the same image no-repeat top right. This is not the best solution as a user can make the text size so large that a gap appears between the images.

    Then I’m using the escape hack (I don’t really like this type of hack) to tell every other browser to use the full size image on the outer div and no image on the inside div. Now I’m having a problem with background image filling all of the inner div.

    I sent an email message to Faruk. If he answers and has a solution it I will send it to you.

  4. Tanny O'Haley Says:

    Sorry that is repeat-y right top in the inner div.

  5. RE Mogul Says:

    Why not Horizontal Elasticity too?

    I column @ smaller-fraction resolution is still recognizable & navigable.

    A column @ expanded resolution (at the expense of other columns) would allow for more comfortable & engaging viewing.

    http://blog.circlecube.com/2007/07/26/rollover-elastic-bounce-rezise/

  6. RE Mogul Says:

    Neat & Clean Columns via CSS:

    http://bubbleheads.blogspot.com/2006/12/sixty-five-years-ago-today.html

    PS: I would like to read the Bubblehead article(s) you authored.
    (ElastIMG Link is 404-ing.)

  7. og Says:

    Your code doesn’t works like a table

  8. WEB 3.0 » Blog Archive » ¿Así que querías saber de CSS? Says:

    […] Elastic Faux Columns – Nick Cowie […]

Google