No se extiende el DIV de alto..

[loncho_rojas]

HOla..

la verdad por primera vez me pasa esto, y quisiera saber si alguno sabe la razon.

Tengo dentro de un contenedor mis capas de estructuracion.. pero suscede que algunos DIV no se me extienden de alto, salvo que les pase un parametro HEIGHT..

Mientras que otros DIV, sin drama se extienden de alto dependiendo del contenido que lleven dentro.

es decir, puedo tener una estructura tipo

<div id="cabecera">

<div id="logo">
<img src="lo que sea" />
</div>

</div>

en ese caso cuando miro bien la cabecera no se extiende segun el contenido... o sea, el div LOGO si se extiende de alto segun tenga una imagen o un texto.. mas el div Cabecera no hace esto..

lo mismo pasa con el footer.. y me afecta porque le pongo un color de background distinto y es muy evidente... en el caso del footer y de la cabecera lo soluciono con un "height", pero en el contenido no lo puedo hacer asi, puesto que no se que tan extenso puede llegar a ser el mismo, y el atributo AUTO; tampoco funciona..

Alguno sabe porque se da esto..

Gracias, y leo sugerencias y comentarios

[kseso?]

Y las propiedades css implicadas son...

Entre tanto das la información completa, sólo por si acaso fuesen elementos flotados los contenidos, investiga la propiedad "overflow" y "clear"

Un saludo

[loncho_rojas]

Podría ser... de CSS entiendo bastante, pero evidentemente no lo se todo, pues nunca me habia pasado tener que armar tantos div dentro de div, flotantes y limpios.


dejo una parte de un codigo CSS para ver si alguna falla existe y explico los hechos.. veré si el overflow ayuda, creo que puede funcionar.. ahora.. porque pasa este fenomeno que explique?

Código HTML:

<style type="text/css">
#footer{
background-color:#D7D7D7;
margin-top:35px;
width:100%;
height:200px;
}


#pie{
width:901px;
}

#pie a:link, #pie a:visited{
	font-family: "Trebuchet MS";
	display:block;
	font-size: 12px;
	text-align:left;
	color:#666666;
	text-decoration: none;
}

#pie a:hover{
	font-family: "Trebuchet MS";
	display:block;
	font-size: 12px;
	text-align:left;
	font-weight:bold;
	color:#666666;
	text-decoration:underline;
}

#webmaster{
	width:150px;
	float:left;
	margin-left:100px;
	margin-top:10px;
}

#footMenu{
width:150px;
float:left;
padding-top:10px;
margin-left:20px;}

#terms{
width:150px;
padding-top:10px;
float:left;}

#datos{
width:250px;
text-align:left;
float:left;}
</style> 

El footer es el contenedor de los elementos de la parte de abajo, por darle un nombre. Este DIV footer no esta precedido de ningun div flotante, pero si contendrá unos divs con Flotantes, como se podrá ver.

El div pie, lo estructure con pseudo-clases de A, y a continuacion cree 4 divs webmaster, datos, terms, footMenu, que ir dentro del div PIE, que a su vez esta dentro de footer

Pero el div footer no se extiende de alto, a pesar de los contenidos.. también probé que el div pie sea el contendor de lo elementos, pero pasa igual, que elementos o circunstancias puede hacer que esto no este funcionando? Imagino que es una tonteria, pero no logro visualizarlo, y el tema es que no quiero usar el atributo "height:200px;" en el footer, o en ningun otro, dado que a los otros no les puse, y sin dramas me reconocia el alto...

Código HTML:

<div id="footer">
  
  <div id="pie">
  
    <div id="footMenu">
        <a href="#">menu</a> 
        <a href="#">menu</a> 
        <a href="#">menu</a> 
        <a href="#">menu</a> 
      </div>
       
      <div id="terms">
           <a href="#">menu</a> 
           <a href="#">menu</a> 
          <a href="#">menu</a> 
          <a href="#">menu</a>
     </div>
      
      <div id="datos">
           <p>datos</p>
      </div>
       
       
  	 
       <div id="webmaster"><img src="img/webM.jpg" /></div>

 </div>
     
</div> 

[kseso?]

Al flotar un elemento, se alteran sus propiedades (su comportamiento) natural. Una de tantas que se ven alteradas es que aunque él aumente de tamaño, su contenedor no lo hace.

Así que para neutralizar algunas de esas "anomalías", tienes dos opciones:
O añades a la caja contenedora de los elementos flotados la propiedad "overflow" con el valor "auto o hidden" en el css o añades en el html justo antes de cerrar esta caja contenedora de los flotantes un div vacío con la propiedad "clear: both".

A eso me refería antes.

[loncho_rojas]

yap.. entendisimo.. te agradezco...