<div class="headfoot">
Header Zone</div>
<div id="container">
<div id="right">
<a href="#"><em>CLICK</em> here to make the right column the longest<span><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 />
this is the right column<br />
</span></a>
</div>
<div id="left">
<a href="#"><em>CLICK</em> here to make the left column the longest<span><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<br />
this is the left column</span></a></div>
<a href="#"><em>CLICK</em> here to make the middle column the longest<span><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 />
this is the middle column<br />
</span></a>
<div class="clear">
</div>
</div>
<div class="headfoot">
Footer Zone<br />
In the footer part you can add your copyright notice and your hottest links.
</div>
<style type="text/css">
html, body{ margin:0px; padding:0px; background:#eee; font-family:verdana; font-size:12px}
.headfoot{ display:block; height:70px; width:1024px; margin:0 auto; background:#08a; color:#fff; text-align:center; padding:5px; font-size:100%}
#container{ position:relative; width:634px; margin:40px auto; display:block; background:#0ac; border-left:200px solid #aa8; border-right:200px solid #a8a; overflow:visible}
#left{ float:left; position:relative; width:200px; margin-left:-200px; display:inline}
#right{ float:right; position:relative; width:200px; margin-right:-200px; display:inline}
.clear{ clear:both; height:1px; overflow:hidden}
a:visited{ color:#000}
#container a:visited, a{ color:#000; text-decoration:none}
#container a span{ display:none}
#container a:active, #container a:focus{ color:#fff; text-decoration:none; background:transparent; cursor:default}
#container a:active span, #container a:focus span{ display:inline; left:0}
em{ font-weight:bold}
h1{ font-size:160%}
h2{ font-size:140%}
h3{ font-size:120%}
</style>
