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

[PloMar]

I have these four Divs:

Code: Select all

<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

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