problemas con galeria de imagenes maquetadas con CSS

[Walk3r]

Hola chicos tengo un problema que me tiene loco, en realidad son varios pero primero lo primero:
Estoy haciendo una galeria usando <div> en el HTML y asignandole los atributos en una hoja CSS; esta galeria se encuentra en una pagina con cabecera y con pie, y el problema que me tiene loco es que al usar "float:left;" para alinear las imagenes, el <div> contenedor de los <divs> que alojan las imagenes pierde todos sus atributos de alto y ancho y por supuesto el pie de la web se pega al logotipo de la cabecera y la galeria de imagenes se desborda pasandole por encima al pie de la pagina.

Ahora la pregunta es: Como alinear las fotos de la galeria 1 al lado de la otra siempre respetando el width y el height del div contenedor?

ESTE ES EL HTML:


<div class="galeria">
<div class="galeria-contenido"><a href="objetos/images/img1.png"><img src="objetos/thumbs/img1.png" alt="Ejemplo 1"><span style="color:green;"><br>1ra imagen</span></a></div>
<div class="galeria-contenido"><a href="objetos/images/img2.png"><img src="objetos/thumbs/img2.png" alt="Ejemplo 2"><span style="color:green;"><br>2ra imagen</span></a></div>
<div class="galeria-contenido"><a href="objetos/images/img3.png"><img src="objetos/thumbs/img3.png" alt="Ejemplo 3"><span style="color:green;"><br>3ra imagen</span></a></div>
<div class="galeria-contenido"><a href="objetos/images/img4.png"><img src="objetos/thumbs/img4.png" alt="Ejemplo 4"><span style="color:green;"><br>4ra imagen</span></a></div>
<div class="galeria-contenido"><a href="objetos/images/img5.png"><img src="objetos/thumbs/img5.png" alt="Ejemplo 5"><span style="color:green;"><br>5ra imagen</span></a></div>
<div class="galeria-contenido"><a href="objetos/images/img6.png"><img src="objetos/thumbs/img6.png" alt="Ejemplo 6"><span style="color:green;"><br>6ra imagen</span></a></div>
</div>



AQUI VA EL CSS


.galeria {width:800px; height:auto;
margin:10px;
padding:5px;
border:1px solid black;


}

.galeria-contenido {width:210px;
height:130px;
margin: 10px;
padding:5px;
background-color:#f5f7f9;
border-right: #a5a7aa solid 1px;
border-bottom: #a5a7aa solid 1px;
text-align:center;
display:block;
}







SOLO PUSE LA PARTE CSS que toca a la galeria.

pues espero sus respuestas que estoy al perder las neuronas

[ArturoGallegos]

creo que lo que necesitas es aplicar un overflow en auto o hidden en los estilos del contenedor y en los estilos del pie de pagina aplica un clear:both

Código CSS:

.galeria {width:800px; height:auto;
margin:10px;
padding:5px;
border:1px solid black;
overflow:hidden;
}
 

[Facundo_Nahuel]

Código:

.galeria-contenido{
     width:210px;
     height:130px;
     margin: 10px;
     padding:5px;
     background-color:#f5f7f9;
     border-right: #a5a7aa solid 1px;
     border-bottom: #a5a7aa solid 1px;
     text-align:center;
     display:inline-block
}

[Walk3r]

Pues problema resuelto muchas gracias chicos :D
usando clear:both y el overflow:hidden se soluciono el desborde.

Gracias nuevamente