Optional column

[pakmannen]

Hey people,

I have a site where I'm always having at least two columns, but on some pages, there is a third one. I'm sort of wondering if I can get away with using the same markup for both scenarios.

What I'd like is for this:

<div id="column-1">
Lorem ipsum
</div>
<div id="column-3">
Lorem ipsum
</div>

To result in: Two columns (http://www.tjoff.com/jens/twocols.jpg), whereas this:

<div id="column-1">
<div id="column-2">
Lorem ipsum
</div>
Lorem ipsum
</div>
<div id="column-3">
Lorem ipsum
</div>

Would result in: Three columns (http://www.tjoff.com/jens/threecols.jpg).

The following css:

#column-1 {
float:left;
width:740px;
}

#column-2 {
float:right;
width:230px;
height:100%; /* or something? */
}

#column-3 {
float:right;
width:160px;
}

Results in something like: Three columns (http://www.tjoff.com/jens/threecols2.jpg). Now, the problem is that if the content of column-1 is longer than that of column-2, it will leak into the space reserved for column-2. That is, it will be placed underneath it.

The question: Can I somehow counter this by making column-2 of equal height to column-1? (Not using fixed heights)

Alternatively, is there another approach that would let me use similar html markup?

Cheers!