<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

<!--
  This template demonstrates 3 column static web page layout
  implementation using css and no tables.
-->

<html>
<head>
<title>Static 3 column CSS layout</title>

<style type="text/css">

body {
  text-align:center;
  font-family: Georgia, Serif;
}

#frame {
  width:750px;
  margin-top:10px;
  text-align:left;
}

#main {
  float: left;
  width: 350px;
  background: #F5F5F5;
  padding: 10px;
  margin:5px;
}

#leftcontent {
  float: left;
  width: 140px;
  background: #FFFFCC;
  border: 1px dashed #CCCCCC;
  padding: 10px;
  margin: 5px;
}

#rightcontent {
  float: left;
  width: 140px;
  background: #DDEEFF;
  border: 1px dashed #CCCCCC;
  padding: 10px;
  margin: 5px;
}

#rightcontent p {
  font-size:10px;
}

#leftcontent a {
  font-size:12px;
  line-height:2;
}

h1 {
  font-size:large;
}

</style>

</head>

<body>

<div id="frame">

<div id="leftcontent">
<h1>Left Content</h1>
<a href="#">Link number one</a><br>
<a href="#">Today I saw the sun</a><br>
<a href="#">Hyperlinks are good</a><br>
<a href="#">I was in the wood</a><br>
<a href="#">Make a single click</a><br>
<a href="#">Animals run quick</a><br>
<a href="#">Now it is too late</a><br>
<a href="#">Dot net tech I hate</a><br>
<a href="#">And more</a>
</div>

<div id="main">
<h1>Center Content</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>

<div id="rightcontent">
<h1>Right Content</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>

</div>

</body>
</html>
