row1
row/column syntax:
<div class="row">
<div class="col-1-2">col 1</div>
<div class="col-1-2">col 2</div>
</div>
row2 clears because of...
.row:after {
content: " ";
display: table;
clear: both;
}
and because the left column is floated left, this row drops down here
that's no good
but clearing the row is necessary using .row:after, otherwise this row would be messed up
I could apply overflow:hidden to .row but then that can screw up dropdown menus, etc...
.col-1-4
.col-1-4