CODEWITHSUNDEEP
javascripthtmlcss
Milos Nikolic
Milos Nikolic

Reputation: 383

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>

Upvotes: 0

Views: 687

Answers (2)

Hiren
Hiren

Reputation: 621

You can use flex-box here. 

/*The container div*/
.flex_container {
   display: flex; /* This will make the div as flexible container*/
   flex-flow: row wrap; // the shortcut for flex-direction: row/column; and flex-wrap:wrap;
   /* Other styles ...*/
}
/*for generated divs*/
.flex_item {
  /*your styles*/
}

You can learn more about flex-box at https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 1

Nick Bull
Nick Bull

Reputation: 9866

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.

Upvotes: 2

Related Questions