Corrección de galería con Float

[LucasAddams]

PARA FUTUROS TEMAS CON ESTE MISMO PROBLEMA:

Lo mejor es hacer así (dejo el código de solución hallado después de una siesta):

Código HTML:

<div id="campo-de-cuadros">
        <div id="cuadro"></div>
        <div id="cuadro"></div>
        <div id="cuadro"></div>
        <div id="cuadro"></div>
</div> 

Código:

#campo-de-cuadros{
	background: none;
	width: 81.2%;
	height: 1000px; /*El alto del div, si queres, para el scroll*/
	margin: 0 auto;
	overflow-y: auto;
}

.cuadro{
	width: 25%; /*Hacer en porcentaje si el campo está en porcentaje*/
	height: auto;
	float: left;
}

De esta manera, utilizando tanto el cuadro como el campo de cuadros en porcentajes, se logra que se queden alineados de manera correcta.

IMPORTANTE: Si el cuadro contiene una imagen <img src="la imagen"> les va a quedar un pequeño espacio abajo del float y para eliminarlo, hay que poner un display block, de manera que el código quedaría así:

Código HTML:

<div id="campo-de-cuadros">
        <div id="cuadro"></div>
        <div id="cuadro"></div>
        <div id="cuadro"></div>
        <div id="cuadro"></div>
</div> 

Código:

#campo-de-cuadros{
	background: none;
	width: 81.2%;
	height: 1000px; /*El alto del div, si queres, para el scroll*/
	margin: 0 auto;
	overflow-y: auto;
}

.cuadro{
	width: 25%; /*Hacer en porcentaje si el campo está en porcentaje*/
	height: auto;
	float: left;
}

.cuadro img{
	width: 100%;
	height: 100%;
	display: block; /*para ocultar el espacio*/
}