CSS - Faux columns with background color instead of repeating background image?

Question

Greetings,

I have a two-column (floated) layout set up where the columns need to "look" like they have matching heights. The "shorter" column has a background color, and needs to look like it's the same height as the main content column that expands to fit its contents.

I know that it's relatively easy to implement this layout by applying a repeating background imageto the wrapper of the two columns, and clearing the floats of the two columns below. Is this the only way to accomplish the affect, or is it possible to do this by applying a background color to the "shorter" column and not using a repeating image?

Answer 1

If the shorter column is floated, a percent-based height cannot be set to it.

However, a percent-based height can be set to the shorter column if it is absolutely positioned, but I was mainly curious if it's possible to do this with a floated layout.

Answer 2

A 1px high GIF will be tiny, just do faux columns. Trying to do what you're describing is just begging for a head ache and browser inconsistencies.

Why do you want to avoid faux columns?

Answer 3

If you are really averse to using an image (why not just have a solid colored background image?), you could use the one true layout techique: http://www.positioniseverything.net/articles/onetruelayout/

Answer 4

have a wrapper div with the same background color as your shortest floated div.

HTML

<div id="wrap">
   <div id="longerDiv"></div>
   <div id="shorterDiv"></div>
</div>

CSS

#longerDiv {
   background:#9c9;
}

#wrap {
   background:#99c;
}

#shorterDiv {
   background:#99c;
}