appending DIV comes vertically

Question

Hi,

In the below code, progressDiv is the DIV which is getting build up. But it is getting build up vertically... i need it horizontally... What shud i do ?

    var progressDiv = document.getElementById('progressDiv')
    var div = document.createElement('div');

    div.style.display = 'block';
    div.style.cssFloat = 'left';
    div.style.width = '10px';
    div.style.height = '10px';
    div.style.backgroundColor = 'red';
    div.style.border = '1px solid black';

    progressDiv.appendChild(div);
    if (progressDiv.childNodes.length == 20)
        while (progressDiv.hasChildNodes())
            progressDiv.removeChild(progressDiv.firstChild);

Answer 1

div.style.cssFloat = 'left'; should be div.style.float = 'left';

Answer 2

Ah, good old IE. If you make the div a span, set the style to inline-block, and drop the float, it should work:

var progressDiv = document.getElementById('progressDiv');
var span = document.createElement('span');

span.style.display = 'inline-block';
span.style.width = '10px';
span.style.height = '10px';
span.style.backgroundColor = 'red';
span.style.border = '1px solid black';

progressDiv.appendChild(span);
if (progressDiv.childNodes.length == 20) {
    while (progressDiv.hasChildNodes()) {
        progressDiv.removeChild(progressDiv.firstChild);
    }
}

Why a span rather than a div? Because IE doesn't like you to try to inline elements that are block by default, even if you change their display. But it's fine with making default-inline elements blocky.

Don't know if dropping the float will mess up something else you're trying to do, though. But if you're just trying to do a progress bar, it should be fine provided you keep the progressDiv wide enough.