Milos Nikolic Milos Nikolic - 4 months ago 15
HTML Question

Multiple DIVs next to each other

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

onclick
, 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
levmax
, and every for loop has some assigned value, but all these values should be retrieved from DB).

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.

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:

<html>
<head>
<script>
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<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<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<levmax){
lev++;
var bo = document.getElementById("kod");
var di = document.createElement('DIV');
for (var i=0; i<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);
}
}

}
</script>
</head>
<body id="kod" onload="addBu()">
</body>
</html>enter code here

<head>
<script>
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<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<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<levmax){
lev++;
var bo = document.getElementById("kod");
var di = document.createElement('DIV');
for (var i=0; i<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);
}
}

}
</script>
</head>
<body id="kod" onload="addBu()">
</body>
</html>

Answer

Using CSS! Let's say the containing <div> for each item's HTML component has a class name .item:

.item {
  width: 300px;
  padding: 20px;
  float: left;
}

would align all <div>'s with class name item side-by-side.

In fact there are many ways to do this. Here's an example using BootStrap:

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="db-item col-md-4">

            </div>
            <div class="db-item col-md-4">

            </div>
            <div class="db-item col-md-4">

            </div>
        </div>
    </div>
</body>

and then use your JavsScript skills to insert a new </div><div class="row"> whenever you want one. In this case, every 3 items would be the ideal.

Comments