<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>www.flyso.cn</title> <meta name="Generator" content="www.flyso.cn" /> <meta name="Author" content="flyso" /> <meta name="Keywords" content="flyso, Style, Sheets, CSS1, CSS2, CSS" /> <meta name="Description" content="CSS ~ Cascading Style Sheets" /> <style type="text/css"> html, body {margin:0px; padding:0px; background:#eee; font-family:verdana; font-size:12px;} /* The header and footer */ .headfoot {display:block; height:70px; background:#08a; color:#fff; text-align:center; padding:5px;font-size:30px;} /* This bit does all the work */ #container {position:relative; display:block; background:#0ac; border-left:200px solid #aa8; border-right:200px solid #a8a;} #inner {display:block; margin-left:-200px; margin-right:-200px; padding:5px;} #left {float:left; position:relative; width:200px; left:0px;} #right {float:right; position:relative; width:190px; right:0px;} #center {margin-left:200px; margin-right:200px; position:relative; display:block; height:1%;} .clear {clear:both;} /* Just to extend each column */ #inner a:visited, a {color:#000; text-decoration:none; cursor:default;} #inner a span {display:none;} #inner a:active, #inner a:focus {color:#fff; text-decoration:none; background:transparent; cursor:default;} #inner a:active span, #inner a:focus span {display:block;} a:visited, a {text-decoration:underline; cursor:pointer;} a:hover {text-decoration:none; cursor:pointer;} em {font-weight:bold;} </style> </head> <body> <div>Header</div> <div id="container"> <div id="inner"> <div id="left"><a href="#"><em>CLICK</em> here to make the left column the longest<span>this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column</span></a></div> <div id="right"><a href="#"><em>CLICK</em> here to make the right column the longest<span>this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br /></span></a></div> <div id="center"><a href="#"><em>CLICK</em> here to make the middle column the longest<span>this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br /></span></a></div> <div></div> </div> </div> <div>Footer<br />NOTHING could be simpler...!</div> <div style="text-align:center;"> <p>However, the following example IS even simpler and works in IE6 (with a fix 'cos IE6 gets it almost wrong), Opera 7.23 (the only browser to do it right) and now also in Mozilla/Firefox. It crashes NN7 though.</p> </body> </html>