simpletwocolumn
<!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" lang="en">
<head>
<title>Free Two Column Tableless Template by http://www.getcsstemplates.com</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
html, body {
margin : 0;
font-family : Verdana, Helvetica, Arial, sans-serif;
font-size : 90%;
}
blockquote {
border : 1px solid #b30000;
padding-top : 5px;
padding-left : 10px;
padding-bottom : 5px;
padding-right : 10px;
margin : 10px;
text-align : justify;
}
p {
padding : 10px;
margin : 0;
}
h1 {
display : none;
}
a {
color : #b30000;
text-decoration : none;
}
a:hover {
color : #b30000;
}
img {
padding : 3px;
border : 1px solid #b30000;
}
img.floatTL {
float : left;
margin-right : 7px;
margin-bottom : 7px;
margin-left : 10px;
margin-top : 12px;
}
img.floatTR {
float : right;
margin-left : 7px;
margin-bottom : 7px;
margin-right : 10px;
margin-top : 12px;
}
#navbartop {
margin-top : 5px;
margin-right : 5px;
text-align : right;
color : #b30000;
padding-left : 4px;
padding-right : 4px;
}
#navbartop a {
color : #999a02;
text-decoration : none;
}
#container {
width : 100%;
margin : 0 auto;
}
#header {
width : 100%;
height : 170px;
background : url("simpletwocolumn-images/bg.gif") repeat-x 0% 0%;
}
.logo {
float : right;
margin-top : 25px;
text-align : center;
}
.logo h2 {
color : #999a02;
font-family : Arial, Verdana, Helvitica, sans-serif;
}
.logo p {
color : #999a02;
font-family : Arial, Verdana, Helvitica, sans-serif;
margin-top : -20px;
font-weight : bold;
}
#navigation {
position : relative;
display : block;
height : 39px;
font-size : 11px;
font-weight : bold;
background : transparent url(simpletwocolumn-images/off.gif) repeat-x top left;
font-family : Arial, Verdana, Helvitica, sans-serif;
border-top : 4px solid #b30000;
}
#navigation ul {
float : right;
margin : 0;
list-style-type : none;
width : auto;
padding-top : 0;
padding-left : 0;
padding-bottom : 0;
padding-right : 12em;
}
#navigation ul li {
display : block;
float : left;
margin : 0;
}
#navigation ul li a {
display : block;
float : left;
color : #666;
text-decoration : none;
padding : 11px 20px 0 20px;
height : 23px;
background : transparent url(simpletwocolumn-images/divider.gif) no-repeat top right;
}
#navigation ul li a:hover, #navigation ul lia.current {
color : #b30000;
background : #fff url(simpletwocolumn-images/on.gif) no-repeat top left;
}
#wrapper {
float : left;
width : 100%;
margin-bottom : 20px;
}
#content {
margin : 2em 30% 0 7%;
border-right : 1px solid #b30000;
margin-bottom : 0.2em;
text-align : justify;
}
.inset {
float : right;
width : 265px;
padding : 5px;
border : 1px solid #b30000;
margin : 5px 0 0 10px;
font-size : 85%;
background-color : #e1f6ff;
}
#right {
float : left;
width : 20%;
margin-left : -27%;
margin-top : 2em;
margin-bottom : 0.2em;
}
#right h2 {
font-size : 1.2em;
color : #e2e2e2;
background-color : #b30000;
padding-top : 0.2em;
padding-left : 0.5em;
padding-bottom : 0.2em;
margin-top : 2.4em;
}
#right h3 {
font-family : arial;
font-size : 0.9em;
padding-top : 5px;
padding-left : 15px;
color : #b30003;
margin-left : 10px;
}
#right p {
font-family : arial;
font-size : 0.75em;
padding-left : 15px;
margin-left : 10px;
margin-right : 10px;
text-align : justify;
padding-right : 20px;
background-color : #eff6ff;
}
#footer {
clear : both;
text-align : center;
padding : 5px 10px;
color : #fff;
background : #b30004;
}
#footer a {
color : #ccc;
}
#sidenav {
border-bottom : 1px solid #b30000;
font-family : Arial, Verdana, Helvitica, sans-serif;
}
#sidenav ul {
margin : 0;
padding : 0;
list-style : none;
}
#sidenav li {
border-top : 1px solid #b30000;
}
#sidenav li a {
display : block;
font-weight : lighter;
font-size : 0.9em;
color : #333;
text-decoration : none;
padding : 4px 20px 2px 7px;
text-align : center;
}
#sidenav li a:hover {
color : #b30000;
}
</style>
</head>
<body>
<div id="navbartop">
<a href="http://www.getcsstemplates.com" title="Free CSS Templates">Home</a> | <a href="#">Sitemap</a> | <a href="#">Contact</a>
</div>
<div id="container">
<div id="header">
<h1>Free CSS Templates by http:www.getcsstemplates.com</h1>
<div class="logo">
<h2>Free CSS Template</h2>
<p>Provided by: <a href="http://www.getcsstemplates.com">Get CSS Templates for Free</a></p>
</div>
</div><!--End Header-->
<div id="navigation">
<ul>
<li><a href="http://www.getcsstemplates.com" title="Free CSS Templates">Free CSS</a></li>
<li><a href="#" title="">About Us</a></li>
<li><a href="##" title="" class="current">Services</a></li>
<li><a href="" title="">Our Work</a></li>
<li><a href="#" title="">Contact Us</a></li>
</ul>
</div>
<div id="wrapper">
<div id="content">
<blockquote>
<p>This is a free 100% CSS/XHTML valid <strong>template</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>
<p><span class="inset"><strong>Lorem ipsum dolor sit amet</strong><br /><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In pharetra lorem a tortor. Phasellus volutpat euismod tellus. Nulla facilisi.</span>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. Nunc sem. 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. Nunc sem. 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.</p>
<img src="simpletwocolumn-images/img2.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. Aliquam venenatis dapibus felis. Proin vel libero. Nunc sem. Fusce imperdiet dignissim sapien. Nullam id felis. Aliquam venenatis dapibus felis. Proin vel libero. Nunc sem.</p>
<img src="simpletwocolumn-images/img2.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. Nunc sem. Fusce imperdiet dignissim sapien. Nullam id felis. Aliquam venenatis dapibus felis. Proin vel libero. Nunc sem.</p>
</div><!--End Content-->
</div><!--End Wrapper-->
<div id="right">
<img src="simpletwocolumn-images/img1.jpg" alt="image1" />
<h2>More Links</h2>
<div id="sidenav">
<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><!--End Sidenav-->
<h2>News And Events</h2>
<h3>Feb.01.07.</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget ... <a href="#">read more</a> </p>
<h3>Jan.21.07.</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget ... <a href="#">read more</a> </p>
</div><!--End Right-->
<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 CSS TEMPLATES</a> </p> </div><!--End Footer-->
</div><!--End Container-->
</body>
</html>
Related examples in the same category