Multiple DIVs next to each other
<p>I am making a program that should retrieve data from some DB, list some data on button placed in the same div, and form new div with buttons <code>onclick</code>, until it reaches some maximum value. To make this example useful for other people, I didn't retrieve data from DB, instead I used some general numbers (value 5 is assigned to variable <code>levmax</code>, and every for loop has some assigned value, but all these values should be retrieved from DB).</p>

<p>The problem i have is how to put all the DIVs next to each other. All examples I found here explain how to align them if they are created in HTML part of the code. But I want to created my DIVs in JS part.</p>

<p>The code works fine, except the part where all the DIVs stand next to each other. Code has something like 80 lines, but all I need is how to align DIVs. Here is the code: </p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;script&gt;
var lev = 0; 
var levmax=5;
var count = 0;
function addBu(){
        lev++;
        var bo = document.getElementById("kod");
        var di = document.createElement('DIV');
        for (var i=0; i&lt;3; i++){
            var bu= document.createElement('BUTTON');  
            var te = document.createTextNode('Text');
            if(lev===1){
            bu.addEventListener("click", novo);
            }
            var te1 = document.createTextNode(lev.toString());
            var br = document.createElement('BR');
            bu.id=lev.toString();
            bu.appendChild(te);
            bu.appendChild(te1);
            di.appendChild(bu);
            di.appendChild(br);
            count++;
        }

        bo.insertBefore(di, bo.childNodes[0]); 
};

function novo(){
    if(lev===1){
        lev++;
        var bo = document.getElementById("kod");
        var di = document.createElement('DIV');
        for (var i=0; i&lt;4; i++){
            var bu= document.createElement('BUTTON');  
            var te = document.createTextNode('Text');
            var te1 = document.createTextNode(lev.toString());
            var br = document.createElement('BR');
            bu.addEventListener("click", repeat);
            bu.id=lev.toString();
            bu.appendChild(te);
            bu.appendChild(te1);
            di.appendChild(bu);
            di.appendChild(br);
            count++;
        }

        bo.insertBefore(di, bo.childNodes[0]); 
    }
    function repeat(){
        if(lev&lt;levmax){
            lev++;      
            var bo = document.getElementById("kod");
            var di = document.createElement('DIV');
            for (var i=0; i&lt;2; i++){
                var bu= document.createElement('BUTTON');  
                var te = document.createTextNode('Text');
                var te1 = document.createTextNode(lev.toString());
                var br = document.createElement('BR');
                bu.addEventListener("click", repeat);
                bu.id=lev.toString();
                bu.appendChild(te);
                bu.appendChild(te1);
                di.appendChild(bu);
                di.appendChild(br);
                count++;
            }   
            bo.insertBefore(di, bo.childNodes[0]); 
            var le=(lev-1).toString();
            document.getElementById(le).removeEventListener("click", repeat);
        }
    }

}
&lt;/script&gt;
&lt;/head&gt; 
&lt;body id="kod" onload="addBu()"&gt;
&lt;/body&gt;
&lt;/html&gt;enter code here

&lt;head&gt;
&lt;script&gt;
var lev = 0; 
var levmax=5;
var count = 0;
function addBu(){
        lev++;
        var bo = document.getElementById("kod");
        var di = document.createElement('DIV');
        for (var i=0; i&lt;3; i++){
            var bu= document.createElement('BUTTON');  
            var te = document.createTextNode('Text');
            if(lev===1){
            bu.addEventListener("click", novo);
            }
            var te1 = document.createTextNode(lev.toString());
            var br = document.createElement('BR');
            bu.id=lev.toString();
            bu.appendChild(te);
            bu.appendChild(te1);
            di.appendChild(bu);
            di.appendChild(br);
            count++;
        }

        bo.insertBefore(di, bo.childNodes[0]); 
};

function novo(){
    if(lev===1){
        lev++;
        var bo = document.getElementById("kod");
        var di = document.createElement('DIV');
        for (var i=0; i&lt;4; i++){
            var bu= document.createElement('BUTTON');  
            var te = document.createTextNode('Text');
            var te1 = document.createTextNode(lev.toString());
            var br = document.createElement('BR');
            bu.addEventListener("click", repeat);
            bu.id=lev.toString();
            bu.appendChild(te);
            bu.appendChild(te1);
            di.appendChild(bu);
            di.appendChild(br);
            count++;
        }

        bo.insertBefore(di, bo.childNodes[0]); 
    }
    function repeat(){
        if(lev&lt;levmax){
            lev++;      
            var bo = document.getElementById("kod");
            var di = document.createElement('DIV');
            for (var i=0; i&lt;2; i++){
                var bu= document.createElement('BUTTON');  
                var te = document.createTextNode('Text');
                var te1 = document.createTextNode(lev.toString());
                var br = document.createElement('BR');
                bu.addEventListener("click", repeat);
                bu.id=lev.toString();
                bu.appendChild(te);
                bu.appendChild(te1);
                di.appendChild(bu);
                di.appendChild(br);
                count++;
            }   
            bo.insertBefore(di, bo.childNodes[0]); 
            var le=(lev-1).toString();
            document.getElementById(le).removeEventListener("click", repeat);
        }
    }

}
&lt;/script&gt;
&lt;/head&gt; 
&lt;body id="kod" onload="addBu()"&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>