Foros del Web » Creando para Internet » CSS »

¿Como estirar div contenedor hacia abajo estando centrado, dependiendo de elementos?

Estas en el tema de ¿Como estirar div contenedor hacia abajo estando centrado, dependiendo de elementos? en el foro de CSS en Foros del Web. @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original <style > body {     background-color : #ffffff ;     margin : 0px auto 0px ;   ...
  #1 (permalink)  
Antiguo 27/01/2011, 09:20
 
Fecha de Ingreso: enero-2010
Mensajes: 47
Antigüedad: 14 años, 2 meses
Puntos: 0
¿Como estirar div contenedor hacia abajo estando centrado, dependiendo de elementos?

Código CSS:
Ver original
  1. <style>
  2. body {
  3.     background-color: #ffffff;
  4.     margin: 0px auto 0px;
  5.     /*padding: 0px;*/
  6. }
  7. #contenido  {
  8.     width: 1024px;
  9.     height: 727px;
  10.     margin-left: auto;
  11.     margin-right: auto;
  12.     margin-top: 0px;
  13.     margin-bottom: 0px;
  14.     background-color: #930;
  15. }
  16. #base_cabecera{
  17.     width: 1024px;
  18.     height: 152px;
  19.     float: left;
  20.     background-color: #C90;
  21. }
  22. #elemento{
  23.     width: 1000px;
  24.     height: 152px;
  25.     float: left;
  26.     background-color: #FC0;
  27.     border: 2px solid #FFF;
  28.     margin-left: 10px;
  29.     margin-top: 5px;
  30. }
  31. #pie{
  32.     height: 45px;
  33.     width: 1024px;
  34.     margin-left: auto;
  35.     margin-right: auto;
  36.     margin-top: 0px;
  37.     margin-bottom: 0px;
  38.     background-color: #646464;
  39. }
  40. </style>
  41.  
  42. <body>
  43.     <div id="contenido">
  44.       <div id="base_cabecera">
  45.             Cabecera
  46.       </div>
  47.        
  48.         <div id="elemento">Elemento 1</div>
  49.         <div id="elemento">Elemento 2</div>
  50.         <div id="elemento">Elemento 3</div>
  51.        
  52.     </div>
  53.     <div id="pie">
  54.         Pie de pagina
  55.     </div>
  56. </body>

Asi es como lo tengo de momento... todo aparece bien centrado, mientras los elementos no rebacen mi fondo que esta de color cafe, pero ya insertando mas elementos, crecen bien mis elementos, pero mi fondo se mantiene fijo y no se estira junto con mis elementos.
  #2 (permalink)  
Antiguo 27/01/2011, 12:01
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 meses
Puntos: 361
Respuesta: ¿Como estirar div contenedor hacia abajo estando centrado, dependiendo de

Hola:

Añade html, body {height:100%;}

Saludos.

  #3 (permalink)  
Antiguo 27/01/2011, 12:16
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: ¿Como estirar div contenedor hacia abajo estando centrado, dependiendo de

para empezar las ID son únicas no se deben repetir en el mismo documento

y bien tu problema radica en el div contenido que tiene alto fijo por eso no crece, quita el alto y agrega overflow:auto; quedando así

Código CSS:
Ver original
  1. #contenido  {
  2.     width: 1024px;
  3.     overflow:auto;
  4.     margin-left: auto;
  5.     margin-right: auto;
  6.     margin-top: 0px;
  7.     margin-bottom: 0px;
  8.     background-color: #930;
  9. }

Pd. quiero pensar que no colocaste tu doctype y el head aquí para ahorrar espacio, pero si no es asi ¬¬ agrega el doctype para que funcione bien
  #4 (permalink)  
Antiguo 27/01/2011, 13:39
 
Fecha de Ingreso: enero-2010
Mensajes: 47
Antigüedad: 14 años, 2 meses
Puntos: 0
Respuesta: ¿Como estirar div contenedor hacia abajo estando centrado, dependiendo de

Hola Ag66
Aque te refieres que mis ID son unicas y que no se deben de repetir, se supone que deben de ser diferentes...

Y gracias por ayudarme me funciono perfecto...
  #5 (permalink)  
Antiguo 27/01/2011, 13:47
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: ¿Como estirar div contenedor hacia abajo estando centrado, dependiendo de

en el html que mostraste tienes id="elemento" para varios div
Código HTML:
Ver original
  1. <div id="elemento">Elemento 1</div>
  2. <div id="elemento">Elemento 2</div>
  3. <div id="elemento">Elemento 3</div>

eso no se debe hacer solo puedes usar id="elemento" una vez, no puedes o no debes usarlo en 2 o mas ocasiones, si necesitas aplicar los mismos estilos para varios elementos utiliza una clase.

Código HTML:
Ver original
  1. <div class="elemento">Elemento 1</div>
  2. <div class="elemento">Elemento 2</div>
  3. <div class="elemento">Elemento 3</div>

y en tu css en lugar de iniciar con el signo # inicias con un punto (.)

Código CSS:
Ver original
  1. .elemento{...}

Etiquetas: abajo, contenedor, dependiendo, elementos, estirar, centrar
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 08:36.