Float Demo

Shows how elements with different heights float with each other

by acbabis

CSS

html, body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
}

div.floatBox {
    width: 25%;
    float: left;
}

JavaScript

function getRandomColor() {
    var nums = [];
    for(var i = 0; i < 3; i++)
		nums.push(Math.floor(Math.random() * 256));
    
    return "rgb(" + nums + ")";
}

for(var i = 0; i < 100; i++) {
    var div = document.createElement('div');
    div.classList.add("floatBox");
    div.style.backgroundColor = getRandomColor();
    div.style.height = Math.random() * Math.random() * 200 + "px";
    document.body.appendChild(div);
}