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

There are tons of ways to do this. One way would be to simply ad a <br /> tag between div 2 and div 3, another would to be to nest every row in a new <div> like below. It really depends on what you are planning to do.

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

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

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

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

Answer 2

wrap the blocks that you want in the same row with a div and maybe play with their width

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

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

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

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

Answer 3

You can create a <div> that will contain the 2x2 divs you want.

Like this:

HTML

<div id="column">
  <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>

CSS

#column {
  position: absolute;
  width: 210px; height: 100%;
  border: 1px solid #000
}

see this jsFiddle

Answer 4

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 -->

Answer 5

http://jsfiddle.net/QXqEG/7/

Like this?

<div style="width: 210px;">
    <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>

Answer 6

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