Hola que tal gente!!
Estoy volviendome loco intentado hacer con divs algo que con tablas es realmente simple... voy directo al grano, aqui va el HTML:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type='text/css'>
BODY, HTML {
height: 100%;
width: 100%;
margin:0;
padding:0;
}
</style>
</head>
<body>
<table width='100%' height='100%' border='0' cellpadding='0' cellspacing='0' style='background-color:gray;'>
<tr>
<td style='background-color:yellow;'> </td>
<td width='700' height='100%' style='background-color:red;'>
<div style='width:500px; height: 500px; background-color: maroon; margin:auto;'>hola</div>
</td>
<td style='background-color:blue;'> </td>
</tr>
</table>
</body>
</html>
Es simple... tengo un centro de ancho FIJO en donde van los contenidos y dos barras laterales cuyo ancho debería ajustarse automaticamente al ancho total de la ventana. Cada uno de los cells aquí tendrá su imagen de fondo: El centro tendrá una imagen específica y los dos cells que se ajustan automaticamente tendrán un patrón repetitivo (una imagen de 1 px repetida). CADA una de las dos franjas laterales IZQ y DER van a tener una imagen diferente (por eso no estoy obligado a usar 2 contenedores).
La verdad ya no se como rayos hacer... tengo bastante experiencia maquetando con divs, lo vengo haciendo hace mucho y resolvi muchos problemas pero este me dejó por lejos sin más qué probar...
Con divs, cree 3 divs flotadas, mi primer aproach fue hacer un diseño liquido pero falló por que siempre a las divs laterales les tengo que definir un WIDTH exacto ya sea en PIXELS o PORCENTAJE...
¿Se podrá indicar a una div que se expanda tanto como le sea posible de forma automática y sin relación a su contenido, tal como lo hacen los TD de una tabla con width 100%?
MUCHAS GRACIAS GENTE !!!!!!!! Si me pueden dar una mano les voy a estar muy agradecido :)