[Ovillo] diseño a 3 columnas

Jue Jun 14 14:52:49 UTC 2007

> david, no me funciona el enlace para ver el asunto.

Yo lo veo bien. http://blog.corunet.com/demotrescolumnas.html

Tal como está funciona en opera, firefox y explorer, pero usando
javascript y el truco de los márgenes negativos que mandó listacss

Lleva un alert para que se vea como lo hace. De todas formas, pego el
código:

<!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=utf-8" />
<title>Demo tres columnas</title>
<script type="text/javascript">
function ajustaraltura(){
	winH = alturaventana();
	alert("ajustar altura:")
	altocolumna=winH-40;
	if( typeof( window.innerWidth ) != 'number' ) {
		document.getElementById('co11').style.height=altocolumna+'px';
	}
	document.getElementById('co11').style.minHeight=altocolumna+'px';
}
function alturaventana(){
	var alto= 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    alto= window.innerHeight;
  } else if( document.documentElement && (
document.documentElement.clientWidth ||
document.documentElement.clientHeight ) ) {
    alto= document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth ||
document.body.clientHeight ) ) {
    alto= document.body.clientHeight;
  }
  return alto;
}
</script>

</head>

<body onload="ajustaraltura()">
<style>
body{
	margin:0 auto;
}
#contenedor{
 overflow:hidden;
}
#co11{
 background-color:red;
 overflow:hidden;
 margin-bottom:-5000px;
 padding-bottom:5000px;
 width:20%;
 float:left;
}
#co12{
 background-color:blue;
 margin-bottom:-5000px;
 width:60%;
 padding-bottom:5000px; float:left;
}
#co13{
 background-color:yellow;
 margin-bottom:-5000px;
 width:20%;
 padding-bottom:5000px;
 float:left;
}
#pie{
	height:40px;
 clear:both;
 float:none;
 background-color:black;
 color:white;
 width:100%;
}

</style>
    <div id="contenedor">
        <div id="co11">
            rojo<br />rojo<br />rojo<br />rojo<br />rojo<br />rojo<br
/>rojo<br />rojo<br />rojo<br />rojo<br />rojo<br />rojo<br />
            rojo<br />rojo<br />rojo<br />rojo<br />rojo<br />rojo<br
/>rojo<br />rojo<br />rojo<br />rojo<br />rojo<br />rojo<br />
            rojo<br />rojo<br />rojo<br />rojo<br />rojo<br />rojo<br
/>rojo<br />rojo<br />rojo<br />rojo<br />rojo<br />rojo<br />
            verde
        </div>
        <div id="co12">azul<br />azul<br />azul<br />azul<br />azul<br
/>azul<br />azul<br />azul<br />azul<br />azul<br />azul<br />azul<br
/>azul<br />azul<br />azul<br />azul<br />azul<br />azul<br />azul<br
/>azul<br />azul<br />azul<br />azul<br />azul<br /></div>
        <div id="co13">amarillo<br />amarillo<br />amarillo<br
/>amarillo<br />amarillo<br /></div>
    </div>
 <div id="pie">pie<br />pie</div>
</body>
</html>