Fluid Columns with matching height and background image

Question

I'm working on a new layout for my site that uses a header, footer and two column center region. The two columns consist of the main content area which is fluid height and width and a right sidebar which is fluid height and fixed width. I have done similar layouts before, but this one depends on using two different background images (one for the sidebar and one for the content area).

Is there any way to implement this, using proper HTML & CSS, so that the background images of the two columns are always the same height, regardless of which columns content is longer?

I've tried using JavaScript to simulate this, but it doesn't work so well if there are images in the content area. I would really prefer not to use this method any way.

Any help is greatly appreciated.

I have setup a staging environment at http://staging.jamesarmes.net/jimmyssandbox to provide an example. This environment is not my finished product, but I want to get the containers under control before I move any further. I have posted a comp of my design at http://www.jamesarmes.net/files/jimmyssandbox-theme1.png.

Answer 1

Assuming an HTML structure something like this

#container
|-- #main-content
|-- #sidebar

you want to use faux columns, applying the repeating background to #container. So long as each is a vertically repeating background that doesn't have issues like each needing to repeat at irreconcilable heights, you can just use it straight off.

But, since you say the main content area is fluid, this introduces some issues. "Creating Liquid Faux Columns" might work for you.

Alternately, I would consider using regular faux-columns and sacrificing one non-semantic div that you make stretch to full height of #container with conflicting absolute positions. The regular faux columns would be positioned to cover the fixed width column and, being very wide, would provide background to the fluid column until the absolutely positioned div, containing the opposite end of the repeating background, kicks in. Structure is just

#container
|-- #bghack
|-- #main-content
|-- #sidebar

with #bghack being behind its siblings.