Create multiple rows of divs

Question

I'd like to create a 2x2 setup, consisting of 4 div elements. See my fiddle for my test so far using inline-block for my display. I'd like to have "div 3" and "div 4" directly below 1 and 2, respectively. Is there a way to do this without floats?

HTML:

<div class = "blocks">
    div 1
</div>

<div class = "blocks">
    div 2
</div>

<div class = "blocks">
    div 3
</div>

<div class = "blocks">
    div 4
</div>

CSS:

.blocks {
    display: inline-block;
    border: solid 1px red;
    width: 100px;
}

Answer 1

Put the blocks in a container div, and give it a fixed width.

.wrap{
    width:210px;
}

<div class='wrap'>
    <div class = "blocks">div 1</div>
    <div class = "blocks">div 2</div>
    <div class = "blocks">div 3</div>
    <div class = "blocks">div 4</div>
</div>

Fiddle

Answer 2

Assuming your divs are fixed width. Simply wrap them in a containing element, then limit the width of that element so that only two can fit on one line. This could easily be modified to fit 3 width wise, or 4 width wise or whatever you so choose for that matter.

Here is a JSFiddle assuming your boxes are 100PX wide.

http://jsfiddle.net/QXqEG/4/

CSS:

.container { width: 210px; }

HTML:

<div class="container">
<div class = "blocks">
    div 1
</div>

<div class = "blocks">
    div 2
</div>

<div class = "blocks">
    div 3
</div>

<div class = "blocks">
    div 4
</div>
</div><!-- end container -->