Creating Css Divs That Read Top-bottom, Left-right And Overflow To The Right

I'm trying to get my divs to flow top-to-bottom, but upon reaching the bottom of the window, overflow new divs to the right. See template layout: http://i.imgur.com/nknD0.png I've

Solution 1:

Use float: right on each of the divs

See fiddle: http://jsfiddle.net/maniator/wzYpV/ (make the pane larger and smaller to see the effect)

---

Here is a fiddle that makes columns: http://jsfiddle.net/maniator/wzYpV/

I used jQuery:

var maxHeight = $('.overflow').height();
var floatHeight = $('.float').height();
var amountOfFloat = $('.float').length;

if(floatHeight * amountOfFloat > maxHeight){
    var minPer = Math.floor(maxHeight / floatHeight);
    var overflow = $('.overflow');
    $('.float').each(function(index, item){
        console.log(item, index);
        if(index%minPer == 0 && index != 0){
            overflow = $('<div>', {class: 'overflow'});
            $('body').append(overflow);
        }
        $(item).appendTo(overflow);
    })
}

Solution 2:

First

http://jsfiddle.net/nPSUM/

Second

http://jsfiddle.net/AKW5A/1/

Solution 3:

Well it's not really fully supported yet but multi-column layouts are in CSS3.

http://www.quirksmode.org/css/multicolumn.html

Solution 4:

So how about something like this?

http://jsfiddle.net/nPSUM/6/

i think it doesnt quite act like youd want it to but its pretty close.. i think..