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 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;">
<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;">
<div id="columntwo" style="float: left; width: 17em; margin-left: 2em">
<div id="columnThree" style="float: right; margin-right: 1em; width: 17em;">
<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;">
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.