Forum

Posted: **05 May 2015, 05:31**

I have these four Divs:

<div class="dv1">DIV 1</div>
<div class="dv2">DIV 2</div>
<div class="dv3">DIV 3</div>
<div class="dv4">DIV 4</div>

I'm trying to float two divs left (under each other) and two divs right (under each other).
What css code to write so to result this alignment (without table columns)?

Code: Select all

DIV 1      DIV 3
DIV 2      DIV 4

Posted: **05 May 2015, 05:38**

Try changing the order of the HTML and use the css code from this example:

Code: Select all

<style>
.dv1 {
  height:30px;
  float:left;
  width:45%;
  background:pink;
  clear:left;
}
.dv2 {
  height:50px;
  float:left;
  width:45%;
  background:pink;
  clear:left;
  margin-top:10px;
}
.dv3 {
  height:30px;
  float:right;
  width:45%;
  background:lightblue;
  clear:right;
}
.dv4 {
  height:50px;
  float:right;
  width:45%;
  background:lightblue;
  clear:right;
  margin-top:10px;
}
</style>

<div class="dv1">DIV 1</div>
<div class="dv3">DIV 3</div>
<div class="dv2">DIV 2</div>
<div class="dv4">DIV 4</div>

Demo:

DIV 1

DIV 3

DIV 2

DIV 4

Forum

Float two Divs left and two Divs right (under each other)

Float two Divs left and two Divs right (under each other)

Float two Divs left and two Divs right (under each other)