problema con crecimiento de capaz

lester_18 · #1 (**permalink**) 01/06/2009, 07:52

hola, me gustaria que me ayudaran con esto.

tengo tres divs, de los cuales uno es el contenedor y los otros dos estan dentro del mismo. que son A y B.

lo que quiero hacer es que si coloco algo dentro de A que supere su tamaño (alto) este cresca y que al crecer A, B se mueva hacia abajo y el contenedor tambien cresca lo mismo que crecio A para guardar las proporciones.

espero haberme explicado bien y muchas gracias por su tiempo

Código HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
#contenedor {
	position:absolute;
	left:34px;
	top:34px;
	width:679px;
	height:298px;
	z-index:1;
	background-color: #00FFFF;
}
#A {
	position:absolute;
	left:45px;
	top:42px;
	width:583px;
	height:170px;
	z-index:2;
	background-color: #CC0000;
}
#B {
	position:absolute;
	left:45px;
	top:214px;
	width:582px;
	height:50px;
	z-index:3;
	background-color: #00FF00;
}
-->
</style>
</head>

<body>
     <div id="contenedor">
     
         <div id="A"></div>
         
         <div id="B"></div>
         
     </div>
</body>
</html>

Mikmoro · #2 (**permalink**) 01/06/2009, 09:09

A eso le solemos llamar "columnas equilibradas", y hay muchas formas de hacerlo, según lo que necesites. Yo en las FAQ de CSS te muestro una forma de hacerlo, pero hay muchas más. Busca en google por esos términos y verás muchos resultados, supongo.

lester_18 · #3 (**permalink**) 01/06/2009, 18:34

gracias viejo, hice un ejecicio y me funciono bien pero tengo otro en el que no me funciona, uso mas divs y ya he hecho de todo y no me sale, voy a poner el codigo con los divs en absolute que es como me funciona.

la idea es que al colocar bastante texto o poquito el pie siempre este al final.

espero alguien me guie que debo cambiar. y a que capaz debo ponerle relativo

yo cambiaba la capa global la principal y el pie a relativas, pero entonces no sabia como acomodarlas despues, se colocaban donde ellas querian y se perdia toda la maquetacion que tengo.

Código HTML:

<body>

<div id="globlal">
  
  <div id="curva-superior"></div>
  
   <div id="cabecera">
    <div id="escudo"> reservado para el escudo</div>
    <div id="logo"></div>
   </div>
  
  <div id="menu">
    
  </div>
  
  <div id="navegacion">
       
  </div>
  
  <div id="principal" ></div>
 
  <div id="pie"> </div>

  <div id="curva-superior"></div>

</div>

</body>

y el css

Código HTML:

#globlal {
	position:absolute;
	width: 800px;
	height:688px;
	z-index:1;
	left:50%;
	margin-left:-400px;
}


    #curva-superior {
   	  background-image: url(../objetos/curva-superior.gif); 
	  background-repeat: no-repeat ;
	  position:absolute;
	  width:800px;
	  height:12px;
	  z-index:1;
	  left: 1px;
	  overflow : hidden
    }
    #curva-inferior {
	background-image: url(../objetos/curva-inferior.gif);
	background-repeat: no-repeat;
	position:absolute;
	width:800px;
	height:12px;
	z-index:2;
	left: 1px;
	top: 658px;
	overflow : hidden
     }
	 
#cabecera { border-right: black 1px solid ; border-left: black 1px solid ;
	position:absolute;
	width:798px;
	height:85px;
	z-index:3;
	left: 1px;
	top: 12px;
}
	#logo {
	       background:url("../objetos/LJ1.jpg");
		   position:absolute;
	       width:645px;
	       height:85px;
	       z-index:1;
	       left: 0px;
	       top: 2px;
    }
    #escudo {
	      
	       position:absolute;
	       width:155px;
	       height:85px;
	       z-index:2;
	       left: 645px;
	       top: -1px;
     }

/* inicio barra de navegacion */
#navegacion {
    background:url("../objetos/barra.gif");
	border-right: black 1px solid;
	border-left: black 1px solid ;
	float:left;
	position:absolute;
	width:800px;
	height:35px;
	z-index:4;
	left: 0px;
	top: 97px;
}


    
#menu {
	background:url("../objetos/menu.jpg");
	background-position: bottom;
	border-left: black 1px solid;
	position:absolute;
	width:165px;
	height:491px;
	z-index:5;
	left: 0px;
	top: 133px;
	padding:10px 0px 0px 0px;
}

#menu li {list-style:none ; margin: 4px 0px 4px 6px}

#principal {
	background:url("../objetos/fondo.jpg");
	position:absolute;
	width:634px;
	height:503px;
	z-index:2;
	left: 166px;
	top: 133px;
	border-right: black 1px solid;
	
}

#pie {
	background:url("../objetos/barra.gif");
	border-right: black 1px solid;
	border-left: black 1px solid;
	position:absolute;
	width:800px;
	height:36px;
	z-index:7;
	left: 0px;
	top: 636px;
}

kseso? · #4 (**permalink**) 02/06/2009, 04:07

Cita:

Iniciado por lester_18

gracias viejo,

Ves como ya se te nota, "abuelo"

Cita:

Iniciado por lester_18

la idea es que al colocar bastante texto o poquito el pie siempre este al final.

www.araudi.net
Las faq´s de css

Todo lo anterior del "abuelo" D.H.2C.L. Mikmoro

Un saludo