Layout Sample #2

<!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" lang="en">
<head>
<title>Layout Sample #2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
html, body { margin: 0; padding: 0; }
body {
     background: #000;
     color: #696969;
     font: normal 80%/1.5em Verdana, Helvetica, Arial, sans-serif;
     text-align: center;
}
#wrapper {
     width: 800px;
     margin: 0 auto;
     text-align: left;
     padding: 0;
}
#header {
     background: SlateBlue;
     width: 548px;
     height: 130px;
     margin: 0;
     float: left;
     padding: 0;
     padding-right: 20px;
}
#logo {
     border: thin solid #444;
     width: 556px;
     height: auto;
     margin: 5px 0 10px 5px;
     float: left;
     clear: both;
     padding: 0;
     background: #EAEAEA;
     position: relative;
} 
#logo h1 {
     margin: 5px 0 0 15px;
     padding: 0;
     float: left;
}
p { 
margin: 50px 5px 2px 20px;
}
#side-bar {
     float: right;
     position: relative;
     width: 230px;
     height: 600px;
     margin: 0;
     background: #fff;
}
#wrap {
     width: 546px;
     margin: 0;
     padding: 0;
     float: left;
     overflow: visible;
}
#side-block {
     width: 30px;
     height: 468px;
     float: left;
     position: relative;
     margin: 0;
     padding: 0;
     background: SlateBlue;
     border-right: 2px solid #000;
}
#side-block a:link, #side-block a:visited {
     margin: 0;
     padding: 0;
     color: SlateBlue;
     text-decoration: none;
     font: bold 12px Arial, sans-serif;
}
#side-block a:active, #side-block a:hover, #side-block a.current {
     margin: 0;
     padding: 0;
     color: #fff;
     text-decoration: none;
     font: bold 12px Arial, sans-serif;
}
#side-block span {
     float: left;
     text-align: center;
     display: block;
     margin: 1px 0 1px 2px;
     padding: 3px 0 3px 0;
     width: 26px;
     background: #000;
}
#footer {
     width: 800px;
     height: 30px;
     float: left;
     magin: 0;
     padding: 0;
     position: relative;
     background: SlateBlue;
}
#footer p {
     margin: 0;
     padding: 7px 5px 0 30px;
     color: #eee;
     font: 500 12px Arial;
}
#content {
     width: 520px;
     height: 468px;
     overflow: hidden;
     float: left;
     margin: 0;
     padding: 0;
     background-color: transparent;
}
/* Additional Classes */
.mini-nav {
     width: 0 auto;
     position: absolute;
     right: 10px;
     top: 5px;
     margin: 0 auto;
}
.mini-nav a:link, .mini-nav a:visited {
     text-decoration: none;
     font: bold 10px Arial, sans-serif;
     color: MediumSlateBlue;
     text-transform: capitalize;
}
.mini-nav a:active, .mini-nav a:hover, .mini-nav a.current {
    text-decoration: none;
     font: bold 10px Arial, sans-serif;
     color: #708090;
     text-transform: capitalize;
}
.mini-nav p {
      position: relative;
}
.nav {    
     background: #E9E9E9;
     border-top: 2px solid #000;
     border-right: 2px solid #000;
     width: 568px;
     height: 468px;
     margin: 0;
     float: left;
     padding: 0;
}
.nav #content h3 {
     color: Midnightblue;
     margin: 7px 0 7px 17px;
}
.nav #content p {
     margin: 4px 0 3px 17px;
}
-->
</style>
<script type="text/javascript">
<!--
/* Remove this script when applying this template. */
var filler = ['You are welcome to modify this template.', ' Layout sample #2 by essential -', 'if you have comments or suggestions, don\'t hesitate to drop-in a mail over my inbox!', 'Template #2/ released: 11-19-2008 -'];
var filler2 = ['This is just a sample layout!', 'All contents must be filled according to you!', 'Time to bring out those great ideas!', 'Links waiting to be filled!']
function textFiller(preloaded, message)
{ for ( var x = 0; x < message; x++ ) 
{ document.write( preloaded[Math.floor(Math.random() * 4)] + ' ' ); }
}
//-->
</script>
</head>
<body>
<div id="wrapper">
<div id="side-bar">
<!--Mini Nav Sample-->
<div class="mini-nav"> 
<a href="#" class="current">Home</a> | <a href="#">About</a> | <a href="#">Site Map</a> 
</div><!--mini-nav-->
<p><script type="text/javascript">textFiller(filler2,23);</script></p>
</div><!--#side-bar-->
<div id="wrap">
<div id="header">
<div id="logo"><h1> W E L C O M E ! </h1></div>
</div><!--#header-->
<div class="nav">
<div id="side-block">
<!--Sample Navigation-->
<span><a href="#" class="current">H<br />O<br />M<br />E</a></span><span><a href="#">M<br />U<br />S<br />I<br />C</a></span>  <span><a href="#">M<br />O<br />V<br />I<br />E<br />S</a></span> 
</div>
<div id="content">
<h3>Feel free to ask!</h3>
<p><script type="text/javascript">textFiller(filler,11);</script></p> </div>
</div>
</div>
<div id="footer"><p>&copy; 2008 yourdomain.com</p></div>
</div>
</body>
</html>
Layout Sample #2

This article has been dead for over three months
