Problemas con float (Creo)

[adrian_hm13]

Buenas, pues estoy haciendo 4 cajas centradas en la página, todo bien hasta que al redimensionar la ventana los divs con float:right se van abajo de los que tienen float:left os dejo foto:




PD: Estoy aprendiendo, así que tal vez sea una tontería y la haya cagado, como de costumbre, xD

Código HTML:

<div id="contenido">
         <div class="caja"></div>
         <div class="caja"></div>
         <div class="caja"></div>
         <div class="caja"></div>
         <div class="borra-flotacion"></div>
    </div>
 

Código CSS:

.caja:first-child {
    width: 400px;
    height:300px;
    float:left;
    margin: 125px 0px 50px 125px;
    background-color:red;
    }
.caja:nth-child(2) {
    float:right;
    width: 400px;
    height:300px;
    margin: 125px 125px 50px 0px;
    background-color:blue;
    }
.caja:nth-child(3) {
    float:left;
    width: 400px;
    height:300px;
    margin: 50px 0px 0px 125px;
    background-color:yellow;
    }
.caja:nth-child(4) {
    float:right;
    width: 400px;
    height:300px;
    margin: 50px 125px 0px 0px;
    background-color:black;
    }