que alguien me explique! Div con altura segun el contenido

[memox32]

Es algo re contra hablado, que un dia soluciones pero no recuerdo como jajaja y quiero entenderlo para nunca mas rabiar

Tengo:
- divs Contenedor
- div Contenido

Como hago para que el Contenedor valla adecuando la altura al contenido??

[angelAparicio]

En principio, si el div contenido está dentro del div contenedor, este ajustará su altura de manera automática.

[memox32]

Haber si me explico mejor:

Pagina 1

Código HTML:

<div class="contenedor">
  <div class="contenido"> Contenido con altura de 2000px </div>
</div> 

Pagina 2

Código HTML:

<div class="contenedor">
  <div class="contenido"> Contenido con altura de 700px  </div>
</div> 

Como hago para que el borde de contenedor se achique o agrande según la variación de contenido

[bambuweb]

Podrías poner el codigo css que estas usando para esos divs?

Saludos!

[memox32]

Ahora funciona con un div con la propiedad clear:both; seri asi

Código HTML:

<div class="contenedor">
  <div class="contenido">
    Contenido con altura de 2000px .... 
    <div class="clear"></div>
 </div>
</div> 

Esto es correcto??? que otra alternativa existe?

la definicion de .contenedor y .content:

Código HTML:

#content-container {
	background: #F3F4EE url(images/body.jpg) repeat-y center top;	
        border:0px solid #FF3300;
}
#content {
	width: 800px;
	margin: 0 auto;
    border:1px dotted #FF3300;
}

[David]

Si #contenido está flotando (?), esa es la mejor opción.

[bambuweb]

Em... en los codigos que mostras pareciera que son 2 cosas diferentes. Por ejemplo:

#content-container {} es una ID. O sea que solo aplica las propiedades dentro de el a <div id="content-container"></div>

Pero por lo que veo, no tenes ningun div que tenga ese id.

Por otra parte veo que los divs tienen "class". Para definir una class en css, se hace con un "." y no con la almohadilla(#)

De manera que podrías hacerlo asi:

Opcion 1:

HTML

Código HTML:

<div id="contenedor>
   <div id="container">bla bla</div>
</div>
 

CSS

Código CSS:

#contenedor {
width:x;
font-family:x;
}
#container{
width:x;
loquesea:x;
}
 

Opcion 2:

HTML:

Código HTML:

<div class="contenedor">
   <div class="container">bla bla</div>
</div>
 

CSS

Código CSS:

.contenedor{
propiedad1:x;
propiedad2:x;
}
.container{
propiedad1:x;
propiedad2:x;
}
 

Saludos!

[memox32]

Perdon perdon, copie el codigo original del css y yo lo habia simplificado para el ejemplo las equivalencias serian :

.Contenedor >> #content-container
.Contenido >> #content

pero si vale la aclaracion para aquellos que no lo sepan y nos esten mirando por este canal jajajaja:
- punto para clase
- almoadilla para id.

en fin el contenido a su ves tiene datos osea otro div mas con float:left; profundizando el codigo original seria:

Código HTML:

<div class="contenedor">
  <div class="contenido">
     <div class="data"></div>
     <div class="sidebar"></div>
    <div class="clear"></div>
 </div>
</div> 

donde clase data y sidebar tiene entre otras cosas mas:

Código HTML:

.data {
  float:left;
}
.sidebar{
  float:right;
}

y donde clear por supuesto tiene

Código HTML:

.clear{
   clear:both;
}

entonces para concluir porque es la mejor opcion poner este div vacion con la propiedad clear???

[David]

Lo explicó Mikmoro en su guía de migración a XHTML + CSS:

E) - Otra cosa muy frecuente y que por tanto merece la pena recordar es que cuando una caja que no tiene un alto definido (que crecerá según su contenido), lo único que tiene dentro son cajas flotadas (con la propiedad "float"), esa caja no crecerá tanto como las cajas que tiene dentro. Esto es debe a que las cajas flotadas no ocupan espacio físico en el flujo del documento. Generalmente tiene fácil solución, colocando justo antes del cierre de la caja en cuestión una caja vacía como:
<div class="corte"></div>
</div> <--cierre de la caja principal-->

y en la hoja de estilo un selector como:
.corte {clear: both;}

Con esto la caja principal crecerá y las otras quedarán visualmente dentro de ella