素晴らしい！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css">
<title>縦横可変幅の縦の三段組</title>
<style type="text/css"><!--
html, body {margin:0px; height:100%;}
#page {margin:0px auto; min-width:600px; /*width:800px;*/ height:100%;}
#page {_width:expression(document.body.clientWidth<(parseInt(currentStyle['min-width'])+2)?currentStyle['min-width']:"auto");}
#header {height:20px; margin-bottom:2px; border:1px solid #ddd;}
#footer {height:20px; margin-top:2px; text-align:right; border:1px solid #ddd;}
#columns {_display:inline-block; min-height:100%; _height:100%; overflow:hidden; _overflow:visible; margin-top:-48px;}
#columns .vert {margin-top:48px;}
#cborder {height:1px; margin-top:-1px; overflow:hidden;}
.vert {_display:inline-block; height:100%; _height:auto; margin-bottom:-32767px; padding-bottom:32767px; border:1px solid #ddd;}
.side1 {float:left; width:200px; margin-right:2px; _margin-right:0px;}
.side2 {float:right; width:200px; margin-left:2px; _margin-left:0px;}
.main {overflow-x:hidden;}
--></style>
</head>
<body>
<div id="page">
<div id="header">header</div>
<div id="columns">
<div id="side1">1<br>2<br>3</div>
<div id="side2">1<br>2<br>3<br>4<br>5<br>6</div>
<div id="main">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10</div>
</div>
<div id="cborder"><div><br></div><div><br></div><div><br></div></div>
<div id="footer">footer</div>
</div>
</body>
</html>
http://fjiblog.cocolog-nifty.com/blog/2011/06/css-div-f577.html