DIV que aumente dinamicamente de auerdo a lo que contenga

0skar · #1 (**permalink**) 11/05/2008, 18:02

Tengan un buen día, yo estoy haciendo una paginita web y quiero hacer la maquetación con CSS, pero me topo con un problema, digamos que tengo un div principal centrado y toda la cuestión donde ahi yo quiero meter todos los divs secundarios donde iran el menu principal, un sidebar, el contenido de la pagina y un footer, la cuestión es que los divs se hacen mas grandes en la medida del texto que contengan, digamos uno le especifica un ancho fijo con width y no se especifica height para que crezca verticamente de acuerdo al texto que contenga, pero no es igual con los divs, para muestra un botón, miren este ejemplito de mi problema en la siguiente direccion:

h**p://www.oscarcalderon.info/problemaCSS/pag.html

No le hagan caso omiso a la franja amarilla que sobresale a los lados del div principal en la parte superior, esa es publicidad del host que tengo.

Bueno, el problema es que, como pueden ver la capa principal tiene un fondo verde, y dentro de ella estan las 2 otras capas, una que tiene un banner y la otra que solo tiene un fondo rojo, el atributo position en el CSS de ambas capas es relative debido a que estan adentro de la capa principal, pero lo que yo quiero es que como las 2 capas estan dentro de la capa color verde, yo quisiera que la capa verde se ajustara para contener ambas capas, es decir que no sobresalga alguna capa asi como pueden ver que en este caso la capa roja sobresale de la verde aun cuando en el código html ambas capas estan dentro de la capa verde, como es posible esto, que la capa principal se haga lo suficientemente larga para contener a todas las capas que hayan en su interior sin que ninguna sobresalga?

Aqui les muestro el HTML de la página, donde tambien esta el código CSS (ya lo comprobé en Firefox, Explorer y se ve de la misma forma)

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#contPrpal {
    position:absolute;
    left:50%;
    width:850px;
    z-index:0;
    top:0px;
    margin-left:-425px;
    background-color:#CCFF99;
}

#bannerPrpal {
    position:relative;
    width:741px;
    height:179px;
    z-index:1;
    top:0px;
    background-image:url(bannerPrpal.jpg);
}

#panelRojo {
    position:relative;
    width:741px;
    height:179px;
    z-index:1;
    top:50px;
    background-color:#FF0000;
}

body {
    background-color: #9c9ace;
}
-->
</style>
</head>

<body>
<div id="contPrpal">

    <div id="bannerPrpal"></div>
    <div id="panelRojo"></div>

</div>
</body>
</html>

Mikmoro · #2 (**permalink**) 11/05/2008, 18:16

Hola, Oskar.
Tu caja verde sí crece, pero como a la caja roja le has puesto un desplazamiento superior de 50px, eso es lo que sobresale de la verde.

Cambia tu top: 50px; por margin-top: 50px; y saldrá como quieres.

Por cierto, una consulta muy bien documentada, sí señor. Así deberían ser todas

Mikel.