Better way to absolutely position boxes to the left and right? - css

Question

Is there a better way to absolutely position a bunch of boxes to the left and right like this? Perhaps using flexbox?
http://jsfiddle.net/frank_o/zpv4jbmx/
HTML:
<div class="box first">
<h1>Lipsum</h1>
</div>
<div class="box second">
<h1>Lipsum</h1>
</div>
...
CSS:
.box {
position: absolute;
background: blue;
color: white;
}
.box.first, .box.third, .box.fifth {
left: 20px;
}
.box.second, .box.fourth, .box.sixth {
right: 20px;
}
.box.first {
top: 20px;
}
.box.second {
top: 120px;
}
...

Answer 1

Since we are going for "better", you could use floating and CSS even/odd rules, like so:
HTML
<div class="box">
<h1>Lipsum</h1>
</div>
<div class="box">
<h1>Lipsum</h1>
</div>
<div class="box">
<h1>Lipsum</h1>
</div>
<div class="box">
<h1>Lipsum</h1>
</div>
<div class="box">
<h1>Lipsum</h1>
</div>
<!-- As many as you'd like... -->
CSS
.box {
background: blue;
color: white;
}
.box:nth-child(odd){
float: left;
clear: both;
}
.box:nth-child(even){
float: right;
clear: both;
}
The result is the same, but the implementation is much more scalable.
http://jsfiddle.net/9mcgvqLj/