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

alf2303 · #1 (**permalink**) 27/01/2011, 09:20

Código CSS:

Ver original<style>
body {
    background-color: #ffffff;
    margin: 0px auto 0px;
    /*padding: 0px;*/
}
#contenido  {
    width: 1024px;
    height: 727px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    background-color: #930;
}
#base_cabecera{
    width: 1024px;
    height: 152px;
    float: left;
    background-color: #C90;
}
#elemento{
    width: 1000px;
    height: 152px;
    float: left;
    background-color: #FC0;
    border: 2px solid #FFF;
    margin-left: 10px;
    margin-top: 5px;
}
#pie{
    height: 45px;
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    background-color: #646464;
}
</style>
 
<body>
    <div id="contenido">
      <div id="base_cabecera">
            Cabecera
      </div>
        
        <div id="elemento">Elemento 1</div>
        <div id="elemento">Elemento 2</div>
        <div id="elemento">Elemento 3</div>
        
    </div>
    <div id="pie">
        Pie de pagina
    </div>
</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.

jomaruro · #2 (**permalink**) 27/01/2011, 12:01

Hola:

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

Saludos.

ArturoGallegos · #3 (**permalink**) 27/01/2011, 12:16

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#contenido  {
    width: 1024px;
    overflow:auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    background-color: #930;
}

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

alf2303 · #4 (**permalink**) 27/01/2011, 13:39

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

ArturoGallegos · #5 (**permalink**) 27/01/2011, 13:47

en el html que mostraste tienes id="elemento" para varios div

Código HTML:

Ver original<div id="elemento">Elemento 1</div>
<div id="elemento">Elemento 2</div>
<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<div class="elemento">Elemento 1</div>
<div class="elemento">Elemento 2</div>
<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.elemento{...}