Teniendo varias columnas con diferente cantidad de informacion cada una. Como lograr que las columnas con menos texto tengan el mismo alto que la que contiene mas texto? La cantidad de texto en cualquiera de las columnas, podria variar de acuerdo a la información del dia.
Vi que muchas personas necesitan encontrar una respuesta a esta duda, seria fabuloso si se logra encontrar una solución.
Debajo copio un codigo de ejemplo.
Documento HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="columns.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="cabezera"><p>Cabezera</p>
</div>
<div id="column1"><p>Columna 1</p>
<p>Lorem ipsum lores sit ame.</p>
</div>
<div id="column2"><p>Columna 2 </p>
<p>Lorem ipsum lores sit ame sit amer tastae colesterum sitreae</p>
</div>
<div id="column3">
<p>Columna 3 </p>
<p>Lorem ipsum lores sit ame. Lorem ipsum lores sit ame sit amer tastae colesterum sitreae Lorem ipsum lores sit ame sit amer tastae colesterum sitreae </p>
</div>
<div id="pie">
<p>Pie de pagina </p>
</div>
</div>
</body>
</html>
-----------
Documento CSS
#container {
width:750px;
background-color:#993333;
height:auto;
}
#cabezera {
width:750px;
background-color:#66FFCC;
height:auto;
}
#column1 {
float:left;
width:150px;
background-color:#CCFFFF;
}
#column2 {
float:left;
width:450px;
background-color:#99CCCC;
}
#column3 {
float:left;
width:150px;
background-color:#CCFFFF;
}
#pie {
float:left;
width:750px;
background-color:#9999CC;
}