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