one_two_three
<!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>FREE TWO COLUMN CSS TEMPLATE</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;
background-color : #f2efde;
}
#wrapper {
width : 870px;
margin : 0 auto;
background-image : url(one_two_three-images/topbg.jpg);
background-repeat : repeat-x;
background-color : #fff;
}
img {
padding : 3px;
border : 1px solid #caff7a;
margin-left : 10px;
margin-top : 5px;
}
.green {
color : #1aff00;
}
.blue {
color : #0099ff;
}
.header {
color : #0099ff;
}
#header h1 {
font-size : 1.9em;
margin-left : 70px;
font-family : "courier new";
width : 180px;
font-weight : bolder;
}
#header h3 {
font-size : 1em;
margin-left : 70px;
font-family : "courier new";
width : 180px;
}
.navbar {
position : relative;
display : block;
height : 24px;
font-size : 11px;
font-weight : bold;
font-family : Arial, Verdana, Helvitica, sans-serif;
}
.navbar ul {
padding : 0;
list-style-type : none;
width : auto;
margin-left : 330px;
margin-top : -24px;
}
.navbar ul li {
display : block;
float : left;
margin : 0 1px 0 0;
}
.navbar ul li a {
display : block;
float : left;
color : #0099ff;
text-decoration : none;
padding : 6px 20px 0 20px;
height : 24px;
}
.navbar ul li a:hover, .navbar ul li a.current {
color : #1aff00;
background : transparent url(one_two_three-images/bgON.gif) repeat-x top left;
}
#top {
background-image : url(one_two_three-images/topbg.jpg);
background-repeat : repeat-x;
height : 27px;
}
#header {
height : 70px;
background-color : #fff;
background-image : url(one_two_three-images/logo.jpg);
background-repeat : no-repeat;
border-bottom : solid #f4f4f4;
padding-left : 30px;
padding-right : 30px;
background-position : 30px 0%;
padding-top : 5px;
}
#toptext {
margin-top : 15px;
background-color : #fff;
padding-left : 30px;
padding-right : 30px;
padding-bottom : 2px;
}
#toptext a {
color : #80b86a;
text-decoration : none;
font-family : Arial, Verdana, Helvitica, sans-serif;
border : 1px solid;
padding-top : 1px;
padding-bottom : 1px;
padding-left : 3px;
padding-right : 3px;
margin-left : 730px;
font-size : 0.8em;
color: #80b86a;}
#toptext p {
font-family : Arial, Verdana, Helvitica, sans-serif;
font-size : 1em;
text-align : justify;
padding-top : 5px;
padding-bottom : 5px;
padding-left : 10px;
padding-right : 10px;
line-height : 1.5em;
}
#leftcolumn {
display : inline;
width : 275px;
float : left;
background-color : #fff;
min-height : 621px;
}
* html #leftcolumn {
height : 621px;
}
#leftcolumn h2 {
font-family : "courier new";
font-size : 1.8em;
color : #0099ff;
padding-left : 35px;
}
#leftcolumn h3 {
padding-left : 35px;
font-family : "courier new";
font-size : 1.1em;
text-decoration : underline;
color : #80b86a;
}
#leftcolumn p {
font-family : Arial, Helvetica, sans-serif;
font-size : 0.9em;
text-align : justify;
padding-left : 35px;
padding-right : 10px;
margin-top : 1em;
margin-bottom : 1em;
}
#leftcolumn a {
color : #80b86a;
float : right;
padding-right : 10px;
margin-top : -17px;
}
#leftcolumn img {
float : right;
margin-right : 7px;
margin-top : 15px;
margin-bottom : 15px;
}
#rightcolumn {
margin : 0 0 0 0;
padding-right : 30px;
display : inline;
width : 565px;
float : left;
min-height : 621px;
background-color : #fff;
}
* html #rightcolumn {
height : 621px;
}
#rightcolumn h2 {
font-family : "courier new";
font-size : 1.8em;
color : #0099ff;
padding-left : 10px;
padding-top : 10px;
}
#rightcolumn p {
padding-left : 10px;
}
.clear {
clear : both;
}
#boxes {
margin-right : 30px;
margin-top : 5px;
}
.box {
width : 250px;
border : 1px solid #caff7a;
margin : 8px 0 10px 15px;
float : left;
padding-bottom : 5px;
}
.box p {
color : #333;
text-align : justify;
padding-left : 10px;
padding-right : 10px;
padding-top : 10px;
}
.box ul {
margin-left : 40px;
line-height : 18px;
padding-top : 10px;
}
.box li {
list-style-type : none;
color: #80b86a;
font-weight: bold;
font-style: italic;}
.box a {
padding-left : 5px;
color : #80b86a;
text-decoration : none;
}
#footer {
background-color : #e2e2e2;
display : inline;
float : left;
padding-top : 5px;
padding-bottom : 5px;
text-align : center;
display : inline;
float : left;
width : 100%;
border-top : 2px solid #ccc;
}
#footer p {
font-size : 0.8em;
color : #0099ff;
}
#footer a {
font-size : 0.8em;
color : #80b86a;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
</div>
<div id="header">
<h1 class="header"><span class="blue">Free</span><br /><span class="green">Template</span></h1>
<h3 class="header">by:<a href="http://www.getcsstemplates.com/">Get Free CSS Templates</a></h3>
<div class="navbar">
<ul>
<li><a href="http://www.getcsstemplates.com" title="Free CSS Templates" class="current">Free CSS</a></li>
<li><a href="#" title="">Link Two</a></li>
<li><a href="#" title="">Link Three</a></li>
<li><a href="#" title="">Link Four</a></li>
<li><a href="#" title="">Link Five</a></li>
</ul>
</div>
</div>
<div id="toptext">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut eget augue in velit elementum bibendum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis...</p>
<a href="#">read more</a>
</div>
<div id="leftcolumn">
<h2>Lorem Ipsum</h2>
<h3>consectetuer adipiscing elit</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
<h3>Donec rutrum neque eu nisl. Morbi eget felis</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut eget augue in velit elementum bibendum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis...</p>
<a href="#">read more</a>
<img src="one_two_three-images/img1.jpg" alt="image 1"/>
<h3>Donec rutrum neque eu nisl. Morbi eget felis</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna.</p>
<a href="#">read more</a>
</div>
<div id="rightcolumn">
<img src="one_two_three-images/signal.jpg" alt="signal"/>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
<div class="clear"></div>
<div id="boxes">
<div class="box">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque. </p>
<ul>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. </p>
<a href="#">read more</a>
</div>
<div class="box">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque. </p>
<ul>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl.</p>
<a href="#">read more</a>
</div>
</div>
<div class="clear"></div>
</div>
<div id="footer"> <p><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