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ú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ú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ú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ó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é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 | Quienes somos | Participaciones | Donde estamos | Contactar</div>
</div>
<div id="Acerca_de" style="height:30px; width:802px; position:relative; float:left;">
</div>
</div>