[Ovillo] Columnas con alto variable

Mar Jul 25 17:05:18 UTC 2006

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.
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;
}