Alargar página con divs

[imnotinsane]

Hola, hace poco que me pasé a las CSS y aún no consigo hacer lo que hacía con las tablas.

El problema que tengo ahora es que estoy haciendo una página que puede tener una altura variable, entonces, las divs de los lados tienen que agrandarse a la par.

Lo que hice fue poner unas divs arriba para la cabecera.
Debajo, una div contenedora que tuviera el resto de la página, y las divs de dentro con posiciones relativas. Así la parte de abajo se mueve cuando se hace más larga la página (en el centro), pero los laterales, aunque le ponga height:100%, no se alargan como debieran.

Aquí les dejo el código, a ver si pueden ayudarme:

Código:

<div id="logo" style="height:67px; width:221px; position:absolute; top:0px; left:0px;"></div>
<div id="top" style="height:67px; width:580px; position:absolute; top:0px; left:222px; background-image:url(imagenes/top.gif)"></div>

<div id="contenedor" style="width:802px; position:absolute; top:68px; left:0px; "> 	
		<div id="menu" style=" width:221px; height:444px; position:relative; top:0px; left:0px; float:left; background-color:#F7F7F7;">
			  <img src="imagenes/menu.jpg" width="221" height="196" /><div id="menu_linea" style="background-image:url(imagenes/linea_menu.gif); float:right; height:252px; width:6px;"></div>	
  		</div>		
		<div id="separador_izq" style="height:444px; width:1px; position:relative;float:left;"></div>				
		<div id="resultados" style="height:28px; width:580px; position:relative; float:right "><img src="imagenes/result.gif" width="580" /></div>
		
		
		<div style=" width:199px; height:100%; float:right; background-color:#E8E8E8">
			
			<div style="width:197px; float:center; background-color:#FFFFFF; margin-left:1px; vertical-align:top;">
				<div id="derecha_arriba" style="height:138px;  padding-top:19px; padding-left:23px;"><img src="imagenes/tit_lotnac.gif" alt="Loteria Nacional" width="94" height="12" />
						<div class="Texto" style="margin-top:13px; margin-left:20px;">
						  <img src="imagenes/flechaverde.gif" width="12" height="8" class="Texto" /> Buscar un n&uacute;mero <br /></div>
						<div class="Texto" style="margin-top:5px;  margin-left:20px;">
						  <img src="imagenes/flechaverde.gif" width="12" height="8" class="Texto" /> Reservar un n&uacute;mero <br /></div>
						<div class="Texto" style="margin-top:5px;  margin-left:20px;">
						  <img src="imagenes/flechaverde.gif" width="12" height="8" class="Texto" /> Comprar un n&uacute;mero <br /></div>
						<div class="Texto" style="margin-top:5px;  margin-left:20px;">
						  <img src="imagenes/flechaverde.gif" width="12" height="8" class="Texto" /> Cesta de la compra</div>				
		      </div>
			     <div id="derecha_abajo" style="height:244px;  padding-top:19px; padding-left:23px; background-color:#F7F7F7;">
				 		 <div class="Texto"><b>Informaci&oacute;n:</b></div>
						 <div class="Texto" style="line-height:15px; margin-top:7px; margin-bottom:22px;">Formas de envío<br />Formas de pago<br />Condiciones</div>
						 <div class="Texto"><b>Enlaces de inter&eacute;s:</b></div>
						 <div class="Texto" style="line-height:15px; margin-top:7px;">
				   enlace1<br />
				   enlace2<br />
				   enlace3<br />
				   enlace4<br />
				   enlace5</div>
			     </div>
			</div>	
				
		</div>		
			
		<div id="centro" style="height:415px; width:380px; float:left; padding-top:1px; padding-right:1px;"><img src="imagenes/center.jpg" width="380" height="415" /></div>	
		
		<div id="menu_rapido" style="height:30px; width:802px; position:relative; float:left; background-image:url(imagenes/bottom.gif)">
			<div class="Arial_11W" style="padding-top:8px; padding-right:4px; padding-left:360px;">Principal &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; Quienes somos &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; Participaciones &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; Donde estamos &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; Contactar</div>
		</div>
		
		<div id="Acerca_de" style="height:30px; width:802px; position:relative; float:left;">
	
		</div>
</div>

[fer10]

si tu quieres que se ajuste el al tamaño verticalmente no se pude, lo mejor que puedes hacer para eso es usar min-height para fire fox y hieght (con pixeles) para IE y le daras un tamaño fijo para que de ahy partan.

nota: las posicones absoultas no se agrandan. usa float, y clear para fijar

[imnotinsane]

antes de nada gracias por la ayuda fer10. No entiendo porque dices que las posiciones absolutas no se agrandan. Si no le especifico una altura al contenedor, dependiendo del su contenido se harán mas o menos grandes no?

Otra cosa, aunque use min-height y height, si lo que quiero es una página con contenido actualizable que podrá tener una altura variable, eso no lo voy a poder controlar si no se alargan a la vez, se quedarán estancadas. He leido por ahí un truco de poner un fondo y encima toda la página, o sino hacerlo por javascript. Lo del fondo no puedo porque el pie de página me lo estropea, además parece una solución un poco cutre... y de javascript no se como hacerlo, podrías echarme una mano?

[fer10]

lo de las posiciones absolutas no es que no se agrande el contenedor mismo, sino cuando quieras usar un footer o pie de pagina , no vas a poder ya que si tu contenido es dinamico se te pondra arriba de las capas posicionadas impidientoe colocarlo justo donde termina el contenido a parte de que tienen varios busg ie con las posiciones absolutas, no creo que sea la manera correcta de implementar un sitio como te comento usar mejor float: left y float:rigth y para el footer clear:both y asi te queda bien.

te paso un manual de marquetarlos.
http://blog.html.it/layoutgala/
en los ejemplos puedes ver como aun que se agrege contenido (ahy de das click) siguen estirandose las divs...

ahy mas buscalos en este mismo foro.