To chyba najczęstszy problem z css'em i divami... Niestety dość duży.
Wyjście pierwsze (jeśli twoja strona będzie zawsze większa od ekranu, albo może zajmować cały ekran):
CSS:
Kod: Zaznacz cały
#container { width: 770px; }
#left, #right { float: left; height: 100%; width: 200px; }
#main { width: 370px; height: 100%; float: left; }
#footer { clear: both; width: 100%; }
body, html { margin: 0px; padding: 0px; height: 100%; }
HTML:
[xml]
<div id="container">
<div id="left">lewa</div>
<div id="main">środek</div>
<div id="right">prawa</div>
<div id="footer">stopka</div>
</div>
[/xml]
Wyjście drugie (zawiera js'a, może być mniejsze od ekranu):
CSS:
Kod: Zaznacz cały
#container { width: 770px; }
#left, #right { float: left; height: 100%; width: 200px; }
#main { width: 370px; height: 100%; }
#footer { clear: both; width: 100%; }
HTML:
[xml]
<script type="text/javascript">
function threeColumn() {
var m = document.getElementById('container');
m.style.height='auto';
var x = m.offsetHeight;
m.style.height = x + "px";
}
</script>
.....
<body onLoad="threeColumn();">
.....
<div id="container">
<div id="left">lewa</div>
<div id="main">środek</div>
<div id="right">prawa</div>
<div id="footer">stopka</div>
</div>
[/xml]
Jeśli nie masz stałych szerokości, to przy resize'ie możesz mieć problemy. Możesz wtedy spróbować dodać window.onresize=threeColumn;
Więcej
tu, albo bardziej złożone rozwiązanie
tu
. A więc spróbuje opisowo. 