Div alignment in html and css

Question

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

@TemaniAfif I tried but fails :( – Nitika Chopra Jan 29 '20 at 10:10 — Nitika Chopra, Jan 29 '20 at 10:10
Try this: https://stackoverflow.com/a/50694753/746736 – Turnip Jan 29 '20 at 10:10 — Turnip, Jan 29 '20 at 10:10

score 2 · Accepted Answer · answered Jan 29 '20 at 10:14

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>

It solves my problem in an easier way. Thanks a lot @Sasi Kumar M — Nitika Chopra, Jan 29 '20 at 10:42

score 1 · Answer 2 · answered Jan 29 '20 at 10:06

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>

score 0 · Answer 3 · answered Jan 29 '20 at 10:23

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>

Div alignment in html and css

3 Answers3