[SOLUCIONADO] ¿Por qué este div tiene altura 0?

[mateovidal]

Hola a todos,
Estot creando una página web básada en fotografía pero me he econtrado con un problema, ya que he creado un div para le sacción de las imagenes, mirad el código:

Código HTML:

<div id="fotos">
        <img class="fotosm" src="imags/IMG-20140311-WA0003.jpg" />
        <img class="fotosm" src="imags/IMG-20140311-WA0004.jpg" />
        <img class="fotosm" src="imags/IMG-20140311-WA0011.jpg" />
        <img class="fotosm" src="imags/1.jpg" />
        <img class="fotosm" src="imags/2.jpg" />
        <img class="fotosm" src="imags/3.jpg" />
    </div>
 

Las imagenes y todo me aparecen bien, en la posición que yo quiero y todo, es decir, no tengo ningún problema en esta sección. Pero al querer añadir un div que haga de pie(footer) se me mete dentro del de las imágenes. Lo he mirado en chrome y al parecer el div de las imagenes (id fotos) tiene una altura 0 y no entiendo porque, ya que si pones en css la propiedad height:auto, en teoría te debería ajustar la altura a los elementos que contiene el div. Pues bien al parecer no es asi y agradecería muchisimo que me explicaráis porque ocurre eso y que puedo hacer para solucionarlo
Os pongo el código css de mi div de las fotos y del div de footer:

Código CSS:

#fotos {
    width:95%;
    padding-right: 10%;
    padding-left:7%;
    height:auto;
}
#footer {
    width:70%;
    margin-right:15%;
    margin-left:15%;
    background-color:black;
}
 

Gracias de antemano

[pzin]

Todos los elementos tienen por defecto un valor automático en height. Es decir, ponerlo o no, en la mayoría de los casos suele ser lo mismo.

¿Las imágenes las tienes flotadas? Si es así, entonces tienes que usar un clearfix. Hay tres métodos, el más simple de ellos es ponerle al contenedor:

Código CSS:

overflow: hidden;
 

Así forzarás a que tome la altura en base a sus hijos. Este problema solo ocurre cuando los hijos están flotados.

Cuando publiques código, usa la opción highlight para que se vea mejor.