fixed width
250px x 400px
float: left;
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