Paste code

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test</title>

<style type="text/css">

* {
margin:0;
padding:0;
}

html, body {
height:100%;
}

body {
background-color:#312d4d;
color:#663300;
font:100.01%/1.4 sans-serif;
text-align:center; /* horizontal centering for IE Win quirks */
overflow: auto;
}

#distance {
width:760px;
height:50%;
margin-bottom:-380px; /* half of container's height */
border:0px solid #000000;
float:left;
}

#container {
position: relative; /* puts container in front of distance */
margin:0px auto;
text-align:left;
height:760px;
width:600px;
clear:left;
background-color:#ffff99;
border:1px solid #000000;
}

#container div {
font-size:80%;
float:right;

}
#header {
position: relative;
width: 100%;
height: 60px;
border-bottom: 1px solid #000000;
background-color: #aaaaaa;
top: 0px;
}
#content{
position:relative;
top:0px;
width: 100%;
height: 640px;
border-top: 1px solid #000000;
background-color: #aaffaa;
}
#footer {
position: relative;
width: 100%;
height: 60px;
border-top: 1px solid #000000;
background-color: #aaaaaa;
bottom: 0px;
}
#left{
position: absolute;
background-color: #00ffff;
border: 1px solid #000000;
top:61px;
left:-123px;
text-align:right;
width: 120px;
height: 639px;
}

</style>
</head><body>
<div id="distance"></div>
<div id="container">
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>

<div id="left">
<br>
<center><b><a href="0">- 0 -</a></b></center>
<a href="1">-1-</a>
<br><a href="2">-2-</a>
<br><a href="3">-3-</a>
<br><a href="4">-4-</a>
<br><a href="5">-5-</a>
<br>
</div>
</div>
</body>
</html>