Buenas!
Tratando de estudiar cómo funciona el tema de maquetar con varias columnas a través de DIVs y no de TABLEs, he empezado por estudiar el artículo de las FAQ, pensando es que ese caso sería el más estable/elegante/compatible.
Bien, parto de este código (le he quitado paddings, etc, para simplificarlo más):
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" lang="es-es">
<head>
<title>Columnas equilibradas</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
margin: 0px;
background-color: #dddddd;
}
#caja_izq {
width: 850px;
margin: 20px auto;
background-color: #4c9ab1;
overflow: auto;
}
#caja_der {
width: 500px;
float: right;
background-color: #82b04d;
border-left: solid 30px #fff;
}
#columna_izquierda {
width: 320px;
float: left;
position: relative;
margin-left: -350px;
color: #fff;
}
#columna_derecha {
width: 500px;
float: left;
color: #fff;
}
</style>
</head>
<body>
<div id="caja_izq">
<div id="caja_der">
<div id="columna_izquierda">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
</div>
<div id="columna_derecha">
Hasta ahora todo muy sencillo. Como ambas cajas están todavía abiertas, lo que pongamos dentro aparecerá confinado en la columna derecha. Vamos a añadir pues dos bloques de texto en dos cajas diferentes para ver qué ocurre.
</div>
</div>
</div>
</body>
</html>
La primera imposibilidad que veo en este código, es el hecho de para separar un DIV del otro, se usa la propiedad BORDER-LEFT.
Se me ocurre que el fondo de la página fuera una imagen, en vez de un color. ¿En ese caso ya la hemos liado?
¿Qué cambios harían en el código para conseguir eso?
Gracias.