Si Mik, como digo, lo estoy estudiando, a medida que encuentro huecos de tiempo.
De hecho, claro que me he leído ese DOC adjunto, para entender precisamente eso, y pude ver, como bien dices, que la columna de la derecha está metida dentro de la izquierda, y por ese motivo, me saltó la alarma (y si en el fondo tengo una imagen.. ya la hemos liado).
De hecho, para que veas que soy un estudiante aplicado
, he conseguido hacer con este ejemplo, que todos los FLOAT sean LEFT, y tener un diseño a 3 columnas en vez de 2, usando el mismo mecanismo.. Y LO HE CONSEGUIDO!
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;
}
#Pagina {
width: 980px;
margin: 20px auto;
}
#Columna1 {
background-color: #4c9ab1;
overflow: auto; /* Importante para que esta columna se alargue en funcion de su contenido */
}
#Columna2 {
width: 420px;
float: left;
margin-left: 250px;
border-left: solid 30px #fff;
background-color: #82b04d;
}
#Columna3 {
width: 250px;
float: left;
margin-left: 420px;
background-color: #aa0000;
border-left: solid 30px #fff;
}
#Columna1Contenido {
width: 250px;
float: left;
margin-left: -730px;
color: #fff;
}
#Columna2Contenido {
width: 420px;
float: left;
margin-left: -450px;
color: #fff;
}
#Columna3Contenido {
width: 250px;
float: left;
color: #fff;
}
</style>
</head>
<body>
<div id="Pagina">
<div id="Columna1">
<div id="Columna2">
<div id="Columna3">
<div id="Columna1Contenido">
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="Columna2Contenido">
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 id="Columna3Contenido">
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>
</div>
</div>
</body>
</html>
Pero claro, sigo viendo el mismo problema que no me gusta:
- Conseguir los márgenes entre las columnas a través de BORDER, porqué entonces perdemos de vista lo que hay en el fondo.
Busco alguna solución que pueda realizar 2 o 3 columnas, con DIVs, y que realmente entre medio de ellas se observe lo que haya en el fondo del body.
Claro está que sigo teniendo el requerimiento de que las columnas se alarguen hasta la que tiene más contenido.
Por último, para aclarar más mis intenciones, dejo un código hecho con TABLE de lo que me gustaría conseguir con DIV:
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>Tres Columnas con CSS</title>
<style type="text/css">
body { margin: 0px; background-color: #ddd; }
#Pagina { margin: 20px auto; }
#Tabla1 { width: 100%; }
#Col1 { width: 200px; background-color: #a00; }
#Col2 { background-color: #00a; }
#Col3 { width: 200px; background-color: #a00; }
.Separacion { width: 20px; }
</style>
</head>
<body>
<div id="Pagina">
<table id="Tabla1" cellpadding="0" cellspacing="0"><tr>
<td id="Col1">COLUMNA 1</td>
<td class="Separacion"> </td>
<td id="Col2">COLUMNA 2</td>
<td class="Separacion"> </td>
<td id="Col3">COLUMNA 3</td>
</tr></table>
</div>
</body>
</html>
Gracias por vuestra ayuda.
Mik: Qué importancia tiene si el caso es real o hipotético? Como te dije, intento aprender cómo hacer eso porqué quiero mejorar esa parte (en mi). Así que si el caso me lo invento, vería la consulta igual de válida. Pero la verdad es que no, que lo quiero para un proyecto que estoy empezando ahora, y me gustaría no usar las TABLE para hacer el diseño. Pero si el tiempo apremia, y no me acaba de quedar claro cómo hacerlo, tendré que tirar por ahí.
Gracias por la comprensión.
Un saludo.