una imagen se me corta por culpa del overflow: hidden :(

[Oren]

tengo una pagina, con un texto dentro de una capa en la que tengo puesto un fondo que se repite verticamente.

bien, cuanto mas escribo, el fondo se va repitiendo (logicamente), no se si me entendeis.

el problema que tengo ahora es que a continuación del texto tengo un par de imagenes (mediante un rollo de slideshow, pero no creo que importe, el caso es que son dos images) que al ponerlas a continuacion del texto... es como si la pagina pensase que no hay nada a continuacion, de modo que en vez de seguir alargandose la capa como si hubiese texto corta la imagen. soluciones que se me ocurren:

- quito el overflow: hidden de esa capa. ahora la imagen se ve completa... pero sin el fondo que acompaña al resto.

- dejo el overflow: hidden. no se me ve la imagen (bueno, se me ve unos 40px, que es lo que tengo puesto de padding-bottom).

alguien puede ayudarme y sabe que debo hacer en este caso?

muchas gracias.

[DragonX]

y probaste con overflow:auto

[Oren]

gracias por tu respuesta.

me temo que con overflow: auto la imagen se sigue cortando :(

[DragonX]

pasanos la url de la página o el código css así vemos que es lo que anda mal.

[Oren]

codigo de la pagina (los </div> cierran divs que estan abiertos pero que no muestro por no poner todo el chorizo):

Código:

<div id='content'>
<div class='post_container'>
<!-- text and image -->
<p>Probando esto del slideshow, a ver que tal</p>

<p></p><div id='img-container'>
<p class='nav'><a id='prev' href='#'>Prev</a> | <a id='next' href='#'>Next</a> 
	       <span id='num'></span></p><div id='s1' class='pics'>

<div><img src='http://mipagina.com/imagenes/imagen1.jpg'  /><p>&nbsp;</p></div>

<div><img src='http://mipagina.com/imagenes/imagen2.jpg' /><p>&nbsp;</p></div>
</div>
</div>
</div>
</div>
<div id='footer'></div>

son dos imagenes que se muestran en plan slideshow (primero aparece una, se hace clic en next y muestra la otra). pues como dije el fondo de la capa content se "acaba" y corta las imagenes. el codigo css de esa parte:

Código:

#content {
    height: 100%;
    margin: 0 0 0 200px;
    overflow: hidden;
	background: url("img/bg_content.png") repeat-y;
	width: 500px;
}

.post_container {
	padding: 10px 5px 10px 5px;
	background: url("img/post_container.png") top no-repeat;
}

#img-container	{ margin: 0; padding: 22px 25px 1px 25px; }

#footer {
	background: url("img/bg_footer.png");
	width: 500px;
	height: 40px;
	margin-left: 200px;
}

como marco en negrita, es la capa content la que termina "bruscamente" en vez de seguir incluyendo las imagenes.

[Mikmoro]

¿De qué navegador estamos hablando?

[Oren]

Opera, Firefox y Explorer.

he visto que especificando una altura minima lo arreglo, pero claro. si especifico de altura minima 400px (que es la altura de la imagen que quiero poner ahora), cuando quiera poner una de 100px de alto me van a quedar por debajo 300px sobrando, pero me parece q no va a haber otra opcion...

[Mikmoro]

Con overflow:auto no debería cortarse, sino aparecer la barra de scroll. Pero bueno, no obstante, ¿no podrías no ponerle height al contenedor? de esa manera, ni siquiera necesitarías un overflow. No sé. Habría que ver tu caso real al completo para intentar encontrar una solución.

[Oren]

al final es lo que hice, ponerle a img-container una altura predefinida.

gracias por la ayuda.