I tried this html and CSS ,
.divcss{ width: 48%; margin-right: 5px; margin-bottom: 8px; vertical-align: top; display: inline-block; }<div> <div class="divcss"> Div1 </div> <div class="divcss"> Div2 </div> <div class="divcss"> Div3 </div> <div class="divcss"> Div4 </div> <div class="divcss"> Div5 </div> <div class="divcss"> Div6 </div> </div>It's not compulsory to only 6 div's, it comes dynamically
I want to align div in this order:-
Div1 Div4
Div2 Div5
Div3 Div6
Add a additional class to your parent div, defining the column layout.
CSS:
.divcss { width: 48%; margin-right: 5px; margin-bottom: 8px; vertical-align: top; display: inline-block; } .layout { columns: 2; height: 50%; } HTML:
<div class="layout"> <div class="divcss"> Div1 </div> <div class="divcss"> Div2 </div> <div class="divcss"> Div3 </div> <div class="divcss"> Div4 </div> <div class="divcss"> Div5 </div> <div class="divcss"> Div6 </div> </div> 
Check this. Hope it helps.
.columns{ width: 50%; /*vertical-align: top; display: inline-block;*/ float: left; } .divcss{ display:block; margin-right: 5px; margin-bottom: 8px; }<div> <div class="columns"> <div class="divcss"> Div1 </div> <div class="divcss"> Div2 </div> <div class="divcss"> Div3 </div> </div> <div class="columns"> <div class="divcss"> Div4 </div> <div class="divcss"> Div5 </div> <div class="divcss"> Div6 </div> </div> </div>you just gotta make two columns or even just one, and put your content in them/it i like to make two to give each column a style.
<style> .divcss{ width: 200px; margin-right: 5px; margin-bottom: 8px; vertical-align: top; } .rcolumn { float:left; } .lcolumn { float:left; } </style><div class="lcolumn"> <div class="divcss"> Div1 </div> <div class="divcss"> Div2 </div> <div class="divcss"> Div3 </div> </div> <div class="rcolumn"> <div class="divcss"> Div4 </div> <div class="divcss"> Div5 </div> <div class="divcss"> Div6 </div> </div>
columns