About the Layout

When I was making this layout all I could think about the the Wizard of Oz. I hope you enjoy it as much as I do.

The Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Unloadeed.com</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
background-color: #cacb91;
}
#container{ 
margin:0 auto; 
width:600px; 
background:#ffffff; 
padding:10px; 
color: #000000;
}
#header { 
background : url('/graphics/layoutprevew/popis.jpg'); 
width : 600px;
height : 300px; 
margin-bottom : 10px;
}
#sidebar { 
width: 200px; 
float: left; 
padding: 10px; 
background-color: #ffffff;
}
#content { 
width: 360px; 
padding: 10px;
float: right;
background: #ffffff; 
}
#top { 
clear: both; 
padding: 5px; 
height: 10px; 
background: #ffffff; 
}
#footer { 
clear: both; 
padding: 15px; 
height: 35px; 
background: #ffffff; 
}
A:link, A:active, A:visited{
color: #6b762a;
text-decoration: none;
font-size: 11px;
font-family: arial;}
 
A:hover {
color: #f8acb9;
font-size: 11px;
font-family: arial;}
 
h1 {
background-color : transparent;
line-height: 10px; 
font-family : Arial;
color : #d32d2d;
font-size: 25px;}
 
h2 {
background-color : transparent; 
font-family : Arial;
color : #2d5520;
border-bottom: 3px solid #d32d2d;
font-size: 15px;}
#navcontainer
{
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
border-top: 1px solid #999;
z-index: 1;
}

#navcontainer ul
{
list-style-type: none;
text-align: center;
margin-top: -8px;
padding: 0;
position: relative;
z-index: 2;
}

#navcontainer li
{
display: inline;
text-align: center;
margin: 0 5px;
}

#navcontainer li a
{
padding: 1px 7px;
color: #666;
background-color: #fff;
border: 1px solid #ccc;
text-decoration: none;
}

#navcontainer li a:hover
{
color: #000;
border: 1px solid #666;
border-top: 2px solid #666;
border-bottom: 2px solid #666;
}

#navcontainer li a#current
{
color: #000;
border: 1px solid #666;
border-top: 2px solid #666;
border-bottom: 2px solid #666;
}
</style>
</head>
<body>

<div id="container">
<div id="header"></div>
<div id="top">
<div id="navcontainer">
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
</div>
<div id="sidebar">
<h2>Rawr</h2>
<a href="/">Rawr</a>
<h2>Check</h2>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
    <img style="border:0;width:88px;height:31px"
        src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
        alt="Valid CSS!" />
</a>
</p>
  <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10-blue"
        alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
  </p>
</div> <br />

<div id="content">
<h1>About the Layout</h1>
I wanted to make a beachy layout for summer, and after I was done, I decided it would look cool if I somehow made the text look as if it was written in the sand. 
<h1>The Code</h1>
</div>

</div>

</body>
</html>