Div alto variable

[rapuig]

Hola, es segunda vez que pregunto esto, antes lo había solucionado pero ahora tuve que hacer unos cambios y me volvió a surgir este problema.
Necesito que el alto de un div varíe según su contenido y el resto del sitio se adapten a el. Probe con height: auto; y nada..
Acá va algo de código, sobre las alturas no pongo nada así los que saben me dicen que debo asignarle.

CSS

#wrapper {
width: 980px;
padding: 0;
margin-top: 0;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
}

/*Este es el que necesito que varíe*/
#page {
width: 740px;
margin: 10px auto;
}
Y a su vez, dentro de de page tengo dos divs mas que también necesito que varíen según su contenido.

#contenedor1, #contenedor2{
width: 300px;
text-align: center;
margin -top:10px;
padding-right: 15px;
padding-left: 15px;

}


#contenedor1{ float: left; }
#contenedor2{ float: right; }


MUCHAS GRACIAS

[GAST0N]

deja el html tambien, asi vemos como esta maquetado..

[cristian_cena]

Hola rapuig,
prueba con:

Código CSS:

#page {
width: 740px;
margin: 10px auto;  
overflow:hidden;
}
 

esto te puede servir.

Saludos.

pd: por las dudas aclaro: Las cajas de bloque (entre ellas los divs) siempre son de alto variable, salvo se indique lo contrario o se flote algun elemento anidado, en este caso el height pasa a valer cero y hay que corregirlo añadiendo overflow:hidden.

[rapuig]

Iniciado por cristian_cena

Hola rapuig,
prueba con:

Código CSS:

#page {
width: 740px;
margin: 10px auto;  
overflow:hidden;
}
 

[URL="http://jsfiddle.net/cristian_cena/USwyb/"]esto [/URL]te puede servir.

Saludos.

pd: por las dudas aclaro: Las cajas de bloque (entre ellas los divs) siempre son de alto variable, salvo se indique lo contrario o se flote algun elemento anidado, en este caso el height pasa a valer cero y hay que corregirlo añadiendo overflow:hidden.

Parece que funciono, pero ahora me surgio otro problema... Cuando #page es demasiado chico, el footer se me despega de abajo y la idea es que siempre este abajo.
Aca va el CSS del footer por las dudas..


CSS


#footer {
height: 300px;
margin-right: auto;
margin-left: auto;
margin-bottom:0px;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
clear:both;
border: 0px;
}

y el HTML
<div wrapper>
<div page>
<div contenedor1> </div>
<div contenedor2> </div>
</div>
</div>
<div footer> </div>

GRACIAS!

[cristian_cena]

busca por css sticky footer en google.
También puedes hacerlo con la ayuda de jquery. dependerá de js pero no ensucia el html, tu elijes.

Un gusto que te haya sido útil, saludos.

[rapuig]

La verdad no pude de ninguna de las dos formas :/
Gracias de todas formas!

[cristian_cena]

jeje pues sigue probando porque ambas funcionan. un abrazo.

[rapuig]

No lo dudo ;) gracias! Otro.

[rapuig]

Parece que anduvo, en el explorador se ve perfecto, pero en el dreamweaver se ven los divs unos arriba de los otros

[cristian_cena]

no te fies del modo visual de dreamweaver, al menos en mi punto de vista no es para nada una buena herramienta.