No se extiende el DIV de alto..

[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>