Need help with a tricky column positioning problem

There's got to be a better way...

[desmidus]

I've been trying to get this layout to work correctly: <snip>

The CSS is quite dirty, as is the actual html. It's a very rushed site, to say the least. The problem is, I cannot for the life of me figure out a good way to have the two side-by-side columns near the top coexist with the single column below them.

The top left column is a float:left, the top right is a regular div with a left margin wide enough to make it basically the same size as the left one...ewww.

But the major problem is that the float:left column, if longer than the one on right, causes the lower section (beginning with the "Nonsense" header) to wrap around it. If you're using IE, you'll see what I mean.

I've tried setting up a container for the top two columns, but discovered that the float:left wasn't constrained by it on the vertical axis...

Any ideas? I'm close to pulling my hair out here, and I'm sure there's a really elegant and simple way to do this...

[edited by: Nick_W at 7:49 am (utc) on June 11, 2003]
[edit reason] no urls please / thanks! [/edit]

[mipapage]

You're on the right track with the container. If this is what I think it is, you can cause the wrap to stop by putting a 'clearing div' in your conatiner div, after the left and right columns.

Something like this:

<div style="clear:both">&nbsp;</div>

although just clear:left would suffice in this case...