[SOLUCIONADO] 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;
    }
 

[alzacon]

Será que sumando anchos y los margenes derecho e izquierdo sea mayor al #contenido o el ancho que tienes con la ventana redimensionada.

[hackjose]

Es un comportamiento normal de las cajas float cuando no caben

Para evitar que se caigan, hay que tener un contenedor con ancho fijo, en tu caso tienes un contenedor asi que dale un ancho fijo con width.

O tambien puedes usar width con un porcentaje pero tambien utiliza min-width para halla un ancho fijo y no se caigan las cajas

saludos