Display <div> content in column wise

Output

Here explain a way to display multiple <div> in column wise. To achieve this, we required one Parent <div>, and parent div contains multiple child <div>, we list child <div> in column wise.

To achieve this we just need a style like below.

<style>

 

* {

           box-sizing : border-box ;
    }

 

/* Create equal columns that floats next to each other */
.column{

                        float:left ;
          width:50%;

                        padding : 10px;

}

 

/* Clear floats after the columns */

.row:after{

                 content : "";

                        display : table;

                        clear : both;

}

</style>

hope style is straight forward, width in style-class .column and display in style-class .row:after is crucial here. Width property defining number of column to be displayed.

 

 

HTML
you should required one parent and multiple child <div> tags. Below is parent should look like below. Parent should refer style-class "row" 

 

<divname="parent"class="row"style="width:100%;">

Child should refer style-class "column" and put your content under the <div> tag 

 

<divname="child"class="column"style= "background: cornflowerblue" >

 

Once complete above, your child <div> will list in two column. If you decrease the width property of style-class .column to 30%, then <div> will list in 3 column, like that you could reduce the width to list desired level of columns.

HTML should be like below.

 

<divname="parent"style="width: 100%;"class="row">

           <divname="child"class="column"style= "background: cornflowerblue" >

                     <divname="childcontent">

                               My Content 1

                     </div>

           </div>

            

           <divname="child"class="column"style= "background: cornflowerblue" >

                     <divname="childcontent">

                               My Content 2

                     </div>

           </div>

 

           <divname="child"class="column"style= "background: cornflowerblue" >

                     <divname="childcontent">

                               My Content 3

                     </div>

           </div>

 

           <divname="child"class="column"style= "background: cornflowerblue" >

                     <divname="childcontent">

                               My Content 4

                     </div>

           </div>

</div>

 

Output