[SOLUCIONADO] divs me quedan en escalera

[fersosa]

Hola, necesito resolver algo y no encontré aún la solución, espero me puedan ayudar.
tengo un div que engloba 5 divs.
4 quiero que queden en línea y el quinto debajo del 1°
- - - -
-

supongamos que esas líneas son divs.
tenía esto hecho, eran div´s con una imagen cada una. pero al agregarle un texto encima a modo de título, me deja los div´s en forma de escalera, cosa que no quiero.
cómo lo soluciono?

van los códigos:
<div id="libros">

<div id="narrativa"><p><h1>Narrativa</h1></p>
<img src="../responsive/images/tapaslibros/elrevestapa.jpg" align="left"/>
</div>
<div id="poesia"><p><h1>Poesía</h1></p>
<img src="../responsive/images/tapaslibros/fabriltapa.jpg" align="left"/>
</div>
<div id="infantil"><p><h1>Infantil</h1></p>
<img src="../responsive/images/tapaslibros/osodetrapotapa.jpg" align="left"/>
</div>
<div id="otro"><p><h1>Otro</h1></p>
<img src="../responsive/images/tapaslibros/jorobadotapa.jpg" align="left"/>
</div>
<div id="otro2"><p><h1>Otro2</h1></p>
<img src="../responsive/images/tapaslibros/sonetosadostapa.jpg" align="left"/>
</div>


</div>


CSS
#libros {
width: 100%;
padding: 20px;
height: auto;
}
#libros img {
width: 20%;
height: auto;
padding: 20px;
}

Gracias!

[AngelKrak]

con que le asignes esto a tu css, quedara como quieres ;)

Código CSS:

#libros div {
  display: table-cell;
}
 
#libros #otro2 {
  display: block;
}
 

Codepen:
http://codepen.io/AngelKrak/pen/NqNazg

[fersosa]

agregué lo que dices tal cual lo hiciste, y miré tu link para ver si estaba bien, pero no queda.
debe ser otra cosa entonces, no logro decifrar
las imágenes quedan todas de diferentes tamaños, y los 3 primeros div´s quedan juntos, el cuarto sólo a mi derecha y el de abajo si donde debe estar.
la alineación se solucionó, pero queda como desprolijo todo.

[fersosa]

http://uploadpie.com/E2VTx
ahí un link de como me está quedando[URL="http://uploadpie.com/E2VTx"]http://uploadpie.com/E2VTx[/URL]

[AngelKrak]

ya vi cual era tu problema ;) el width: 20%; del css de img necesitas cambiarlo por width: 100%; y poner ese width: 20%; en #libros div tambien cambia tu display: table-cell; por display: inline-block; y esto es opcional, ponle un padding a tus divs para que no esten tan juntos padding: 10px; en #libros div haaa se me olvidaba, quitale el padding al css de tu img
CSS:

Código CSS:

#libros {
  width: auto;
  padding: 20px;
  height: auto;
}
 
#libros div {
  display: inline-block;
  width: 20%;
  padding: 10px;
}
 
#libros #otro2 {
  display: block;
}
 
#libros img {
  width: 100%;
  height: auto;
}
 

Link actualizado:
http://codepen.io/AngelKrak/pen/NqNazg

[fersosa]

Genial! ahora si quedó!!
sólo me resta centrar todo y listo.
Muchas gracias!!!