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

Place to talk about website HTM elements, CSS style and design, and get help with HTML, CSS codes.
PloMar
Posts: 48

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

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

MarPlo
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

Similar Topics