Foros del Web » Creando para Internet » CSS »

DIV que aumente dinamicamente de auerdo a lo que contenga

Estas en el tema de DIV que aumente dinamicamente de auerdo a lo que contenga en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/05/2008, 19:02
 
Fecha de Ingreso: marzo-2007
Ubicación: En El salvador
Mensajes: 78
Antigüedad: 10 años, 8 meses
Puntos: 0
DIV que aumente dinamicamente de auerdo a lo que contenga

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> 

Última edición por 0skar; 11/05/2008 a las 19:06 Razón: Poner el codigo html de la página que muestro en el post
  #2 (permalink)  
Antiguo 11/05/2008, 19:16
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: DIV que aumente dinamicamente de auerdo a lo que contenga

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.
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 05:02.