Wednesday 28 January 2009

CSS / XHTML 3 column layout, inc background img

I've just worked out a way to have longish background images in columns 1 & 3 while the content in column 2 defines how much the page extends.

Explanation:
Create a containing DIV for the whole width of the page between header and footers and add a class with the column 1 background image left aligned, use the ID for all the other styling.

Then inside the containing DIV add a content DIV (to include columns 2 & 3), again use a class to include the column 3 background image right aligned, and use the ID with a float: left; and positioning so the margins, padding and width ensure the content area doesn't overwrite the background image on on column 3.

To fix the margin errors that cause IE6 to display things all skeewiff, use an IE 6 fix style sheet.

I haven't finished yet, so this might not work, but I'm pretty hopeful so far!