Floating multiple divs into three virtual columns

[boogahboogah]

I have a test page put up here:
http://law-monitor.com/trying.html

As you can see there are 6 divs (class: view-row) inside a main container div (class: container).

I have just the following css for the page:

.container{

padding: 10px 0 0 10px;
background:#222222;
float:left;
width:970px;

}
.view-row{

width:293px;
padding:10px;
margin:0 10px 10px 0;
float:left;
background:white;
font-family: georgia, serif;
font-size: 10px;

}

I would have expected that the bottom three divs (which have their floats set), would move all the way up and stick to the bottom of the upper divs.
Instead the lower three divs' top edges align with the bottom of the tallest div. Is this how its supposed to be? How do I make it such that the divs automatically move all the way up?

help! please!

[drhowarddrfine]

Is this how its supposed to be?

Yes. Block level elements layer on top of each other from top->bottom and left->right. It's actually the 3rd element that's blocking the last 3 from being higher.

How do I make it such that the divs automatically move all the way up?

I just woke up and you're asking me this? Javascript will do but can it be done with CSS? First groggy thought: no. If I think of something else. I'll be back.

[boogahboogah]

Thanks for this. Now that I know that its not some CSS coding error on my part, I am going to fix this with javascript, just as you suggested.
Although it would be fantastic if it could be done via CSS alone.
Thanks again

[seegoon]

It's highly counter-intuitive, but you could contain the columns vertically, instead of horizontally, so that you have three container divs. The problem with that is that although the reading order would be div 1, div 2, 3, 4, 5, 6, the order in the html would be 1, 4, 2, 5, 3, 6. So perhaps JS is a better idea.