ayuda con div y su contenido

[RIVERMILLOS]

hola tengo este este html

Código:

<div id="cuerpo">
   
<div id="contenido">

<div class="thumbs">
<a href="#" onclick="mostrarFoto('mybaby_thumb.jpg'); ">
<img src="../View/galeria/thumbs/mybaby_thumb.jpg">
</a>
</div>

</div>
		
</div>

este es el css...

Código:

#contenedor{
text-align: left;
border: 2px solid #cccccc;
width: 700px;
margin: auto;
background-color : #ffffff;
}  
#contenido{
background-color:#000;
padding:2px;
}

el problema es que las imagenes no me parecen dentro de contenido salen debajo del div , estas imagenes llegan por ajax.

que puede ser.

saludos

[kseso?]

Iniciado por RIVERMILLOS

hola tengo este este html

Código:

<div id="cuerpo">
   
<div id="contenido">

<div class="thumbs">
<a href="#" onclick="mostrarFoto('mybaby_thumb.jpg'); ">
<img src="../View/galeria/thumbs/mybaby_thumb.jpg">
</a>
</div>

</div>
        
</div>

este es el css...

Código:

#contenedor{
text-align: left;
border: 2px solid #cccccc;
width: 700px;
margin: auto;
background-color : #ffffff;
}  
#contenido{
background-color:#000;
padding:2px;
}

el problema es que las imagenes no me parecen dentro de contenido salen debajo del div , estas imagenes llegan por ajax.

que puede ser.

saludos

Información insuficiente.
Adjunte un enlace a la página si es posible, y si no lo fuese, facilite, al menos, el código de los elementos afectados/implicados.

Atentamente

[RIVERMILLOS]

mira como me aparece ........




y deberia aparecer las imagenes dentro del div negro.....

y este es el codigo

Código:

	<div id="cuerpo">
    <div id="contenido"><div class="thumbs"><a href="#" onclick="mostrarFoto('mybaby_thumb.jpg'); "><img src="../View/galeria/thumbs/mybaby_thumb.jpg"></a></div>
<div class="thumbs"><a href="#" onclick="mostrarFoto('P1000058_thumb.jpg'); "><img src="../View/galeria/thumbs/P1000058_thumb.jpg"></a></div>
<div class="thumbs"><a href="#" onclick="mostrarFoto('P1010333_thumb.jpg'); "><img src="../View/galeria/thumbs/P1010333_thumb.jpg"></a></div></div>
		<div id="paginacion"><a href="#">0</a></div>
	</div>

[kseso?]

Rivermillos, enlace o códigos (el css especialmente), por favor.
Me da que es un problema del float de algún elemento (que será la razón de que no crezcan sus ancestros).

En lo que puede complementar la información, busque cómo "limpiar float" (o cadena similar).
Un buen lugar de inicio es la introducción a css de www.librosweb.es

No aventuro ninguna de las posibles solucciones, pues depende de su codificación.

Atentamente

[RIVERMILLOS]

mira este es el codigo css completo..

Código:

*{margin:0;padding:0}
td img {display: block;}
img{border:0;}

BODY {
background : #C0D9D9 url(images/fondo.gif) repeat;
font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #666666;
margin : 20px 0px 20px 0px;
text-align: center;
}

#contenedor{
text-align: left;
border: 2px solid #cccccc;
width: 700px;
margin: auto;
background-color : #ffffff;
}  
#contenido{
background-color:#000;
padding:2px;
}

#cabecera{
height : 150px;
width: 700px;
} 
#navegador{
background : #F5F4C3 url(images/fondonav.gif);
border-bottom : 1px solid #cccccc;
} 
#cuerpo{
width:580px;
margin-left: 8px;
padding: 12px 0px 10px 0px;
float:left;
} 
#lateral{
width: 100px;
background-color: #EBF2FE;
border-bottom : 1px solid #cccccc;
border-left : 1px solid #cccccc;
float:right;
} 

#pie{
clear : both;
color : #cccccc;
text-align : right;
margin : 10px 10px 0px 10px;
padding-bottom:10px;
} 
#iframe1{
display:none;	
	}
.thumbs{
float:left;	
margin:5px;	
padding:1px;
background-color:#CCC;
}
.thumbs:HOVER{
background-color:#000;;	
}

saludos

[kseso?]

¿Miró en el enlace que le indiqué?
En esa página, si utiliza el buscador con la cadena indicada /limpiar float/ en el primer resultado obtenido ejemplifica un problema y su solución que es exáctamente lo mismo que muestra en su imagen.

Atentamente

[RIVERMILLOS]

muchas gracias por tu ayuda la solucion era colocar esto en el css

border: thick solid #000;
overflow: hidden;


o agregar un div que limpie el float...

saludos

[mayid]

Creo que el problema era que las imagenes flotaban dentro de un div, y que ese div no tenía un alto definido. Una solución posible sería colocar una altura definida para el div contenedor.

Pero como dice el artículo que te señalaron, el overflow es la técnica más recomendada.

Respecto a ponerle un borde... no creo que eso sea necesario. Creo que el artículo lo hace para mostrar visualmente el resultado.

Ah! El artículo propone una propiedad más para tener compatibilidad con IE6:

height: 1%;