Ajustar Height de los divs

lalogrosz · #1 (**permalink**) 21/05/2008, 14:34

Hola, tengo 3 cajas, una top, una a la izq que es el menu y otro a la derecha que es todo el contenido. Necesito que cuando el contenido crece segun la pagina, el menu se expanda a lo alto, ya que este tiene un fondo. Probe con height:100% pero al tener el otro div por arriba, me hace el 100% mas el tamaño que tengo arriba, no hace el faltante. ¿Que height debo ponerle al menu? No pongo el ejemplo porque creo que se entendio, sino me lo piden......Gracias!

[NiRVaNa] · #2 (**permalink**) 21/05/2008, 14:49

A ver te dejo un codigo CSS que yo uso y me funciona sin problemas, alo mejor te sirve:

Código HTML:

/* Boxes */
#top {
	margin: 0px 0px 0px 0px;
	padding: 10px;
	border: 0px;
	background: #fff;
	height: 165px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	height: 145px;
	width: 928px;
	text-align: center;
}

html>body #top {
	height: 145px; /* ie5win fudge ends */
}

#left {
	position: absolute;
	top: 165px;
	left: 0px;
	margin: 0px;
	padding: 10px;
	border: 0px;
	background: transparent;
	width: 230px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 210px;
}
html>body #left {
	width: 210px; /* ie5win fudge ends */
}
#right {
	position: absolute;
	top: 165px;
	left: 230px; /* Opera5.02 will show a space at right when there is no scroll bar */
	margin: 0px;
	padding: 10px;
	border: 0px;
	background: transparent;
	width: auto;
	width: 698px;
	voice-family: "\"}\"";
	voice-family:inherit;
}

/* End boxes */

Lo unico que tienes que hacer es acomodarlo a tus tamaños...

Enjoy. Salu2!

lalogrosz · #3 (**permalink**) 21/05/2008, 14:54

Gracias, pero me podrias poner tambien los tags de los divs para ver la jerarquia? Gracias!

[NiRVaNa] · #4 (**permalink**) 21/05/2008, 15:04

Mucho no importa eso, ya que al tenes position: absolute, siempre apareceran en tales lugares...

Pero igual, para que lo veas mejor:

Código HTML:

<body>
<div id="right">
	<p>&nbsp;</p>
</div>
<div id="left">
	<!-- Menu -->
	<div id="menu">
		<ul>
			<li><a id="current" href="inicio.php">Inicio</a></li>
			<li><a href="productos.php">Productos</a></li>
			<li><a href="info.php">Informacion</a></li>

		</ul>
	</div>
</div>
<div id="top">
		<p>Arriba</p>
</div>
</body>

Como veras... no sigue un orden...