Simple div bars and their orientation in a box

Bars in a box, aligned to the bottom of the box. A random number of bars (within bounds) with a random height (within bounds). Conclusion: inline-block to the rescue!

by rudiedirkx

HTML

<div id="bars"></div>

CSS

#bars {
    border: solid 1px black;
    display: inline-block;
    padding: 5px;
}
#bars > div {
    display: inline-block;
    vertical-align: bottom;
    width: 5px;
    background-color: #999;
    margin-left: 2px;
}
#bars > div:first-child {
    margin-left: 0;
}

JavaScript

var bars = document.getElementById('bars'), L = 10+parseInt(Math.random()*30);
for ( var b, h, i=0; i<L; i++ ) {
    h = 20 + parseInt(Math.random() * 80);
    b = document.createElement('div');
    b.style.height = h + 'px';
    bars.appendChild(b);
}