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

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;
}