Two columns run out their container

It's been awhile since my last visit here. It's sad to see it isn't as crowded as before...

But anyway, I wouldn't be here if I hadn't a problem.

First, take a look at www.spongymedia.nl/design2
I think the problem shows itself, but I'll explain it anyway. In my contentarea (on the right) I want one big article and two smaller, truncated ones below that. In two columns, that is. The problem is that the two columns don't want to be in the div I want them to be. I already know it has something to do with the floats I used, but when I delete them there won't be two columns anymore. Then the divs sort themself below eachother, but INSIDE the container...

I searched but couldn't really find an answer, which probably will be very simple. Can anyone shine his/her light over this one?

Thanks in advance,

Spongy

Hard to grasp in one view.

If:
.pgraph {
margin-bottom: 100px;
}

and you nest the latenews* divs into the pgraph div, it looks ok. Is that what you mean?

Yep, that is how it should look like. But when I try that in IE, it will not work. I'll try and puzzle around a bit with your solution, see if I can fix this.

Haven't found the final solution yet. Someone?

I did not find the solution... So I can go with the solution of Humanetainit, but then my viewers with IE will never see the page as intended. Surely they could download FF, but you all will understand that that's an impossibility...