simple3column
<!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">
<head>
<title>Open Source CSS Template from http://www.getcsstemplates.com</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
* {
padding : 0;
margin : 0;
}
body {
font-family : Arial, Helvetica, sans-serif;
color : #666666;
font-size : 12px;
}
#wrapper {
width : 770px;
margin : 0 auto;
}
img {
padding : 3px;
border : 1px solid #bce296;
}
img.floatTL {
float : left;
margin-right : 7px;
margin-bottom : 3px;
margin-top : 11px;
margin-left : 10px;
}
img.floatTR {
float : right;
margin-left : 7px;
margin-bottom : 3px;
margin-top : 11px;
margin-right : 10px;
}
#leftcolumn {
display : inline;
width : 170px;
float : left;
min-height : 710px;
border : 1px solid #ccc;
background-color : #fff;
margin-top : 5px;
background-image : url(simple3column-images/bgb.jpg);
background-repeat : repeat-x;
}
* html #leftcolumn {
height : 710px;
}
#leftcolumn h1 {
font-family : sans-serif;
font-weight : lighter;
color : #e8e8e8;
padding-left : 0.65em;
padding-bottom : 1.5em;
padding-top : 0.5em;
font-size : 2.3em;
}
.navigation {
float : left;
margin-left : 0;
margin-top : 0;
margin-bottom : 10px;
width : 170px;
background-color : #c9dddb;
border-top : 1px solid #6d9ca2;
}
.navigation ul {
margin : 0;
padding : 0;
list-style : none;
}
.navigation li {
border-bottom : 1px solid #6d9ca2;
list-style : none;
text-transform : lowercase;
}
.navigation li a {
color : #6d9ca2;
display : block;
padding : 0.7em 0.7em 0.7em 1em;
text-decoration : none;
font-family : arial;
font-size : 0.8em;
font-weight : bold;
font-weight : lighter;
}
.navigation li a:hover {
color : #553;
}
#leftcolumn h3 {
color : #86c215;
font-size : 1em;
padding-top : 1em;
padding-left : 0.7em;
}
.ads ul {
margin-left : 0.9em;
margin-top : 0.5em;
margin-bottom : 0.7em;
list-style : none;
}
.ads li {
padding-bottom : 0.3em;
}
.news h2 {
color : #86c217;
font-size : 1.5em;
text-align : center;
padding-bottom : 0.5em;
font-weight : lighter;
}
.news p {
font-family : verdana;
font-size : 0.75em;
padding-left : 15px;
padding-bottom : 5px;
margin-left : 10px;
margin-right : 10px;
text-align : justify;
padding-right : 20px;
background-color : #eff6ff;
}
.news a {
margin-right : 25px;
margin-bottom : 2px;
color : #48b033;
font-size : 0.8em;
font-weight : bold;
padding : 2px;
float : right;
}
#centercolumn {
border-top : 1px solid #ccc;
border-bottom : 1px solid #ccc;
display : inline;
width : 180px;
float : left;
min-height : 710px;
margin-top : 5px;
}
* html #centercolumn {
height : 710px;
}
#centercolumn h1 {
color : #86c218;
font-size : 1.6em;
font-weight : lighter;
font-family : Arial, Helvetica, sans-serif;
padding-top : 0.4em;
padding-left : 0.7em;
}
.centerads p {
font-family : verdana;
font-size : 1em;
padding-left : 5px;
padding-bottom : 5px;
margin-right : 10px;
text-align : justify;
padding-right : 10px;
}
.centerads {
border : 1px solid #86c216;
width : 160px;
height : 600px;
margin-left : 10px;
margin-top : 10px;
}
.centerads h4 {
background-color : #86c216;
color : #fff;
font-weight : lighter;
font-size : 0.8em;
padding-bottom : 2px;
text-decoration : underline;
}
.centerads h3 {
font-family : verdana;
font-size : 1em;
padding-top : 30px;
padding-left : 3px;
padding-bottom : 5px;
color : #86c213;
text-decoration : underline;
}
.centerads a {
margin-right : 25px;
margin-bottom : 2px;
color : #48b033;
font-size : 0.8em;
font-weight : bold;
padding-left : 3px;
text-decoration : none;
padding-bottom : 15px;
}
#rightcolumn {
display : inline;
width : 414px;
float : left;
border : 1px solid #ccc;
min-height : 710px;
margin-top : 5px;
background-image : url(simple3column-images/bgg.jpg);
background-repeat : repeat-x;
}
* html #rightcolumn {
height : 710px;
}
#rightcolumn h6 {
font-family : Arial, Helvetica, sans-serif;
font-size : 1.1em;
padding-left : 1em;
padding-top : 0.8em;
padding-bottom : 0.6em;
color : #efefef;
}
#rightcolumn p {
text-align : justify;
padding-left : 1em;
padding-right : 1em;
padding-top : 0.8em;
padding-bottom : 0.6em;
font-family : Arial, Helvetica, sans-serif;
font-size : 1em;
}
#rightcolumn h1 {
font-family : Arial, Helvetica, sans-serif;
font-size : 2.3em;
padding-left : 0.4em;
padding-bottom : 1em;
padding-top: .1em;
font-weight : lighter;
color : #efefef;
}
#rightcolumn h2 {
color : #86c219;
font-family : Arial, Helvetica, sans-serif;
font-weight : lighter;
font-size : 1.6em;
padding-top : 0.6em;
padding-left : 0.5em;
}
#rightcolumn a {
color : #b2c4c2;
}
blockquote {
border : 1px solid #86c216;
padding-top : 5px;
padding-left : 10px;
padding-bottom : 5px;
padding-right : 10px;
margin : 10px;
text-align : justify;
}
#footer {
text-align : center;
color : #fff;
background : #86c216;
margin-top : 3px;
display : inline;
float : left;
width : 770px;
padding-top : 5px;
padding-bottom : 5px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="leftcolumn">
<h1>sitedotcom</h1>
<div class ="navigation">
<ul>
<li><a href="http://www.getcsstemplates.com">Free CSS Templates</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div>
<h3>Ads here</h3>
<div class ="ads">
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div>
<div class ="navigation">
<ul>
<li><a href="#">Link Five</a></li>
<li><a href="#">Link Six</a></li>
<li><a href="#">Link Seven</a></li>
<li><a href="#">Link Eight</a></li>
</ul>
</div>
<div class="news">
<h2>News and Events</h2>
<h3>Feb.06.07.</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum ... </p>
<a href="#">read more</a>
<h3>Jan.30.07.</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum ... </p>
<a href="#">read more</a>
</div>
</div>
<div id="centercolumn">
<h1>Sponsors</h1>
<div class="centerads">
<h4>Ads by Whooooever</h4>
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet conesctetuer adipiscing elit.</p>
<a href="#">www.somewebsite.com</a>
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet conesctetuer adipiscing elit.</p>
<a href="#">www.somewebsite.com</a>
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet conesctetuer adipiscing elit.</p>
<a href="#">www.somewebsite.com</a>
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet conesctetuer adipiscing elit.</p>
<a href="#">www.somewebsite.com</a>
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet conesctetuer adipiscing elit.</p>
<a href="#">www.somewebsite.com</a>
<br />
<br />
<h4>Avertise on this site</h4>
</div>
</div>
<div id="rightcolumn">
<h6>template provided by : <a href="http://www.getcsstemplates.com">Get Free CSS Templates and Layouts</a></h6>
<h1>Free CSS Template</h1>
<blockquote>
<p>This is a free 100% CSS/XHTML valid <strong>tempate</strong> from <a href="http://www.getcsstemplates.com">Get CSS Templates for Free</a>. You can link back to my site if you use this template but you don't have to.</p>
</blockquote>
<h2>Lorem ipsum dolor sit</h2>
<img src="simple3column-images/img1.jpg" class="floatTL" alt="Image" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquet elit id augue. Duis rutrum. Praesent massa lectus, malesuada ut, sollicitudin eu, adipiscing id, lacus. Pellentesque scelerisque. In quam nunc, vulputate adipiscing, tincidunt nec, faucibus eget, libero. Integer nec nisi. Praesent iaculis posuere elit. Donec eleifend adipiscing justo. Fusce imperdiet dignissim sapien. Nullam id felis. <a href="#">Aliquam venenatis</a> dapibus felis. Proin vel libero.. Nullam id felis. Praesent iaculis posuere elit. Donec eleifend adipiscing justo. Fusce imperdiet dignissim sapien. Nullam id felis. Fusce imperdiet dignissim sapien. Donec eleifend adipiscing justo. Fusce imperdiet dignissim sapien. Nunc sem.</p>
<img src="simple3column-images/img1.jpg" class="floatTR" alt="Image" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquet elit id augue. Duis rutrum. Praesent massa lectus, malesuada ut, sollicitudin eu, adipiscing id, lacus. Pellentesque scelerisque. In quam nunc, vulputate adipiscing, tincidunt nec, faucibus eget, libero. Integer nec nisi. Praesent iaculis posuere elit. Donec eleifend adipiscing justo. Fusce imperdiet dignissim sapien. Nullam id felis. Aliquam venenatis dapibus felis. Proin vel libero. Praesent iaculis posuere elit. Donec eleifend adipiscing justo. Fusce imperdiet dignissim sapien. Nullam id felis. Fusce sapien. Donec eleifend adipiscing justo. Fusce imperdiet dignissim sapien. Nullam id felis. Proin vel libero. Nunc sem.</p>
</div>
<div id="footer">
<p><a href="http://validator.w3.org/">Valid CSS</a> :: <a href="http://validator.w3.org/">Valid XHTML</a> Copyright © 2007 by Free CSS Templates and Layouts :: Designed by: <a href="http://www.getcsstemplates.com"title="free css templates and layouts">GET FREE CSS TEMPLATES</a> </p>
</div>
</div>
</body>
</html>
Related examples in the same category