freecsstemplate 55
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>FREE CSS TEMPLATE THREE COLUMN</title>
<style type='text/css'>
* {
padding : 0;
margin : 0;
}
body {
font : 85% "Trebuchet MS", Arial, Helvetica, sans-serif;
color : #666666;
font-size : 12px;
}
img {
padding : 0;
border : 1px solid #caff7a;
}
img.floatTL {
float : left;
margin-right : 10px;
margin-bottom : 5px;
margin-top : 5px;
margin-left : 5px;
}
img.floatTR {
float : right;
margin-left : 7px;
margin-bottom : 0;
margin-top : -2px;
margin-right : 10px;
}
h3 {
font-size : 1.4em;
font-weight : lighter;
background-color : #cabdd6;
padding-left : 5px;
}
blockquote {
position : relative;
margin : 10px;
text-align : justify;
padding : 15px;
background-color : #dce3e9;
}
.clear {
clear : both;
}
#wrapper {
width : 770px;
margin : 0 auto;
border : 1px solid #9d9d9d;
background-color : #cdd6e0;
}
#navbar {
margin : 0 5px 5px 5px;
padding : 4px;
background-color : #fffffe;
height : 25px;
}
#navbar ul {
float : left;
list-style : none;
margin : 8px 0 0 0;
}
#navbar ul li {
float : left;
}
#navbar ul a {
color : #323538;
display : block;
text-decoration : none;
padding : 1px 14px 1px 14px;
font-weight : bold;
font-size : 13px;
margin-left : 10px;
}
#navbar ul a.act, #navbar ul a:hover {
border : 1px solid #cdd6e0;
border-bottom : 0;
padding : 1px 14px 1px 14px;
background-color : #cdd6e1;
margin-left : 10px;
font-size : 14px;
}
#header {
border : 1px solid #ccc;
margin : 5px 5px 5px 5px;
height : 100px;
padding : 10px;
background-color : #fffffe;
background-image : url(freecsstemplate 55-images/star.gif);
background-repeat : no-repeat;
background-position: 610px 10px;}
.logo h1#lineone {
font-size : 2.2em;
font-weight : lighter;
font-family : helvetica, arial, sans-serif;
padding-top : 20px;
padding-left : 5px;
color : #a8b799;
border : none;
top : 0;
left : 14px;
letter-spacing : -1px;
}
.logo h1#lineone span {
color : #e78230;
}
.logo h2#linetwo {
padding-left : 5px;
font-size : 0.9em;
font-family : helvetica, arial, sans-serif;
text-transform : none;
top : 25px;
left : 14px;
color : #a8b799;
}
#leftcolumn {
margin : 0 5px 5px 5px;
display : inline;
width : 188px;
float : left;
min-height : 300px;
padding : 0;
}
* html #leftcolumn {
height : 300px;
}
#leftnav {
width : 188px;
min-height : 136px;
background : url(freecsstemplate 55-images/leftsidebgt.jpg) no-repeat;
color : #ffffff;
padding : 0;
margin : 0;
float : left;
display : inline;
}
#leftnavbottom {
height : 33px;
width : 188px;
background : url(freecsstemplate 55-images/leftsidebgb.jpg) no-repeat;
float : left;
display : inline;
}
.col {
width : 160px;
float : left;
padding : 10px 0 8px 10px;
}
.col p {
margin : 11px 0 0 0;
padding : 0;
}
.col ul {
display : list-item;
list-style-type : none;
}
.col li {
padding-top : 5px;
padding-bottom : 3px;
border-bottom : 1px dotted #d0d0d0;
}
.col li a {
color : #e78230;
text-decoration : none;
}
.col li a:hover {
color : #8eb88f;
}
#centercolumn {
margin : 0 5px 0 0;
display : inline;
width : 374px;
float : left;
min-height : 300px;
}
* html #centercolumn {
height : 300px;
}
#centercolumn p {
text-align : justify;
}
#centercolumn a {
color : #e78230;
text-decoration : none;
}
#centercolumn img {
border : 0 solid;
}
#rightcolumn {
margin : 0 5px 0 0;
display : inline;
width : 188px;
float : left;
background-color : #b7c8a7;
min-height : 530px;
padding : 0;
}
* html #rightcolumn {
height : 530px;
}
.news {
margin-top : 15px;
}
.news h5 {
font-size : 1.4em;
font-weight : lighter;
color : #8297b0;
padding-bottom : 0;
padding-left : 10px;
}
.news p {
font-size : 1.1em;
text-align : justify;
margin-bottom : 1em;
padding : 5px;
}
.news a {
color : #d0660b;
}
#footer {
clear : both;
padding : 10px;
margin-left : 5px;
margin-bottom : 5px;
background : #fffffe;
width : 740px;
}
#footer p {
margin : 0;
text-align : center;
line-height : normal;
font-size : x-small;
}
#footer a {
text-decoration : underline;
color : #e78229;
}
#footer a:hover {
text-decoration : none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="logo">
<h1 id="lineone">Css<span>Template</span></h1>
<h2 id="linetwo">by get free CSS templates</h2>
</div>
</div>
<div id="navbar">
<ul>
<li><a href="http://www.getcsstemplates.com" class="act" title="free templates">free css templates</a></li>
<li><a href="#" title="dos">link numero dos</a></li>
<li><a href="#" title="three">three</a></li>
<li><a href="#" title="4">link four</a></li>
<li><a href="#" title="link five">link No five</a></li>
</ul>
</div>
<div id="leftcolumn">
<div id="leftnav">
<div class="col">
<ul>
<li><a href="http://www.getcsstemplates.com" title="free css templates">Free CSS Templates</a></li>
<li><a href="http://moneyearnersonline.blogspot.com" title="earn money online">Make Money Online</a></li>
<li><a href="#" title="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#" title="#">Vestibulum ante ipsum primis in faucibus</a></li>
<li><a href="#" title="#">Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna</a></li>
</ul>
</div>
</div>
<div id="leftnavbottom"></div>
</div>
<div id="centercolumn">
<h3>Lorem ipsum dolor amet</h3>
<blockquote><p>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. Duis sem urna, dictum ac, vehicula in, luctus eget, lectus.</p></blockquote>
<img src="freecsstemplate 55-images/star.gif" class="floatTL" alt="pic" />
<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 <a href="#">velit elementum bibendum</a>. 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. Duis sem urna, dictum ac, vehicula in, luctus eget, lectus. Aliquam erat volutpat. Nulla facilisi. Mauris elementum eros a purus aliquam rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam laoreet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In pharetra lorem a tortor. Phasellus volutpat euismod tellus. Nulla facilisi.</p>
</div>
<div id="rightcolumn">
<h3>Lorem Ipsum Dolor</h3>
<div class="news">
<h5>Lorem ipsum</h5>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing</a> elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus.</p>
<h5>Lorem ipsum</h5>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing</a> elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus.</p>
</div>
</div>
<div id="footer">
<p id="links"><a href="http://validator.w3.org/">Valid XHTML</a> | <a href="http://validator.w3.org/">Valid CSS</a></p>
<p id="legal">Copyright © 2007 by Free CSS Templates Designed by <a href="http://www.getcsstemplates.com/free_css_templates/free-css-template-55.html">FEEE CSS TEMPLATES</a>.</p>
</div>
<div class="clear"></div>
</div>
</body>
</html>
Related examples in the same category