Создание CSS div, которые читают сверху вниз, слева направо и переполняются вправо

Question

Я пытаюсь, чтобы мои div проходили сверху вниз, но при достижении нижней части окна переполняются новые div справа. Посмотреть макет шаблона: http://i.imgur.com/nknD0.png

Я пробовал css/javascript комбинаций ... white-space:nowrap, display: inline, display: table, float:left и других, но не могу заставить его работать так, как на схеме.

Answer 1

Используйте float: right на каждом из div

См. Скрипку: http://jsfiddle.net/maniator/wzYpV/ (сделайте панель больше и меньше, чтобы увидеть эффект)

---

Вот скрипка, которая делает столбцы: http://jsfiddle.net/maniator/wzYpV/

Я использовал 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);
    })
}

Answer 2

Первый

http://jsfiddle.net/nPSUM/

Второй

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

Answer 3

Так как насчет этого?

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

я думаю, что это не совсем так, как вы хотели бы, но это довольно близко .. я думаю ..

Answer 4

Ну, пока он не полностью поддерживается, но многоколоночные макеты в CSS3.

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