Foros del Web » Creando para Internet » CSS »

que alguien me explique! Div con altura segun el contenido

Estas en el tema de que alguien me explique! Div con altura segun el contenido en el foro de CSS en Foros del Web. Es algo re contra hablado, que un dia soluciones pero no recuerdo como jajaja y quiero entenderlo para nunca mas rabiar Tengo: - divs Contenedor ...
  #1 (permalink)  
Antiguo 16/09/2010, 08:50
 
Fecha de Ingreso: julio-2008
Ubicación: San Luis
Mensajes: 70
Antigüedad: 9 años, 4 meses
Puntos: 1
que alguien me explique! Div con altura segun el contenido

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??
  #2 (permalink)  
Antiguo 16/09/2010, 09:19
Avatar de angelAparicio  
Fecha de Ingreso: julio-2009
Ubicación: Sevilla
Mensajes: 307
Antigüedad: 8 años, 5 meses
Puntos: 22
Respuesta: que alguien me explique! Div con altura segun el contenido

En principio, si el div contenido está dentro del div contenedor, este ajustará su altura de manera automática.
__________________
Mis webs:
- Programador Web Autónomo
- Conciertos en Sevilla
  #3 (permalink)  
Antiguo 16/09/2010, 09:29
 
Fecha de Ingreso: julio-2008
Ubicación: San Luis
Mensajes: 70
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: que alguien me explique! Div con altura segun el contenido

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
  #4 (permalink)  
Antiguo 16/09/2010, 10:07
 
Fecha de Ingreso: junio-2009
Mensajes: 85
Antigüedad: 8 años, 6 meses
Puntos: 1
Respuesta: que alguien me explique! Div con altura segun el contenido

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

Saludos!
  #5 (permalink)  
Antiguo 16/09/2010, 10:15
 
Fecha de Ingreso: julio-2008
Ubicación: San Luis
Mensajes: 70
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: que alguien me explique! Div con altura segun el contenido

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;
}
  #6 (permalink)  
Antiguo 16/09/2010, 10:18
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: que alguien me explique! Div con altura segun el contenido

Si #contenido está flotando (?), esa es la mejor opción.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #7 (permalink)  
Antiguo 16/09/2010, 10:24
 
Fecha de Ingreso: junio-2009
Mensajes: 85
Antigüedad: 8 años, 6 meses
Puntos: 1
Respuesta: que alguien me explique! Div con altura segun el contenido

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:
Ver original
  1. <div id="contenedor>
  2.    <div id="container">bla bla</div>
  3. </div>

CSS
Código CSS:
Ver original
  1. #contenedor {
  2. width:x;
  3. font-family:x;
  4. }
  5. #container{
  6. width:x;
  7. loquesea:x;
  8. }


Opcion 2:

HTML:
Código HTML:
Ver original
  1. <div class="contenedor">
  2.    <div class="container">bla bla</div>
  3. </div>

CSS
Código CSS:
Ver original
  1. .contenedor{
  2. propiedad1:x;
  3. propiedad2:x;
  4. }
  5. .container{
  6. propiedad1:x;
  7. propiedad2:x;
  8. }



Saludos!
  #8 (permalink)  
Antiguo 16/09/2010, 11:43
 
Fecha de Ingreso: julio-2008
Ubicación: San Luis
Mensajes: 70
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: que alguien me explique! Div con altura segun el contenido

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???
  #9 (permalink)  
Antiguo 16/09/2010, 12:36
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: que alguien me explique! Div con altura segun el contenido

Lo explicó Mikmoro en su guía de migración a XHTML + CSS:
Cita:
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
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.

Etiquetas: altura, contenido, dinamica
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:38.