¿Cómo crecer contenedor verticalmente, estando centrado?

alf2303 · #1 (**permalink**) 26/01/2011, 01:06

Hola amigos... soy nuevo en este foro... me gustaria que me ayudaran con un problemita en el cual ya tengo rato con ello...
Tengo una pagina web el cual mi div contenedor lo tengo centrado, aparece centrado en mi pagina, pero quiero que este cresca verticalmente dependiendo los elementos de mi div contenedor, claro manteniendo el contenedor centrado como menciono al principio... ya que como lo tengo me mueve todo...

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;
}

<body>
<div id="contenido">
ELEMENTOS...
</div>
</body>

PrendekZ · #2 (**permalink**) 26/01/2011, 02:17

Cita:

body {
background:#fff;
margin:0;
padding:0;
}
#contenido {
width:1024px;
height:auto;
margin:0 auto;
}

Es todo. Te recomiendo que no uses un div superior de 960px de ancho.

Saludos!

alf2303 · #3 (**permalink**) 27/01/2011, 09:14

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.

gVenom · #4 (**permalink**) 27/01/2011, 09:26

Eso se debe a que tienes un tamaño de div height pre-establecido. Si eliminas el height, el div debe estirarse junto con el contenido y el color de fondo tambien.

PrendekZ · #5 (**permalink**) 27/01/2011, 11:50

te lo deje.. y nunca lo probaste.. y si tienes elementos con float, coloca esto:

Cita:

body {
background:#fff;
margin:0;
padding:0;
}
#contenido {
width:1024px;
height:auto;
margin:0 auto;
overflow:hidden;
}

Saludos!