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

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