Align div elements next and under each other

Question

i want to align 4 div boxes so that they are in a 2x2 layout like this

1 2
3 4

My code looks like this

<div style="width:300px;height:300px;float:left;">    DIV 1    </div>

<div style="width:300px;height:300px;float:left;">    DIV 2    </div>

<div style="width:300px;height:300px;clear:left;">    DIV 3    </div>

<div style="width:300px;height:300px;float:left;">    DIV 4    </div>

which produces the following layout:

1 2
3
4

Can someone help me with this?

Answer 1

Give all of them float: left, then wrap them in a container just wide enough to fit 2 of them, so that the other two gets pushed down. For example,

<div id="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
  <div>Div 4</div>
</div>

CSS:

#container {
  width: 600px;
}

#container div {
  float: left;
  height: 300px;
  width: 300px;
}

---

Edit: If you want more divs inside the ones you already got, then you can always apply the same technique to the children, like

<div id="container">
  <div>
    <div>Inner Div 1</div>
    <div>Inner Div 2</div>
    <div>Inner Div 3</div>
    <div>Inner Div 4</div>
  </div>
  <div>Div 2</div>
  <div>Div 3</div>
  <div>Div 4</div>
</div>

Then with CSS, use this additional style:

#container div div {
  float: left;
  height: 150px;
  width: 150px;
}

Answer 2

replace <div style="width:300px;height:300px;clear:left;"> of Div 3 with <div style="width:300px;height:300px; clear:both; float:left">

full html

<div style="width:300px;height:300px;float:left;">
    DIV 1
</div>

<div style="width:300px;height:300px;float:left;">
    DIV 2
</div>

<div style="width:300px;height:300px; clear:both; float:left">
   DIV 3
</div>

<div style="width:300px;height:300px;float:left;">
   DIV 4
</div>