CODEWITHSUNDEEP
htmlcss
Nitika Chopra
Nitika Chopra

Reputation: 1405

Div alignment in html and css

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

Upvotes: 0

Views: 135

Answers (3)

hannon qaoud
hannon qaoud

Reputation: 79

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>

Upvotes: 0

Sasi Kumar M
Sasi Kumar M

Reputation: 2630

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>

Upvotes: 2

Kevin
Kevin

Reputation: 1377

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>

Upvotes: 1

Related Questions