bussinesblue
<!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>CSS Layouts Free 2 Column Business 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;
}
img {
padding : 3px;
border : 1px solid #538cb7;
}
img.floatTL {
float : left;
margin-right : 1em;
margin-bottom : 1em;
margin-top : 1em;
}
img.floatTR {
float : right;
margin-left : 1em;
margin-bottom : 1em;
margin-top : 1em;
}
#wrapper {
width : 800px;
margin : 0 auto;
background-color : #fff;
}
#head {
height : 50px;
background-color : #ffffff;
background-image : url(bussinesblue-images/head1.jpg);
background-repeat : no-repeat;
margin-bottom : 1px;
margin-top : 5px;
}
#head h1 {
color : #e9e9e9;
font-size : 1.3em;
padding-left : 15px;
padding-top : 5px;
}
#head p {
color : #c5c752;
padding-left : 50px;
}
#head ul {
margin : 0;
padding : 0;
list-style : none;
float : right;
margin-top : -10px;
margin-right : 10px;
color : #8ac752;
}
#head li {
display : inline;
}
#head a {
color : #8ac752;
}
#menu {
margin : 0 auto;
padding : 5px 0 6px 0;
background-color : #224080;
}
#menu ul {
margin : 0;
padding : 0;
list-style : none;
text-align : center;
}
#menu li {
display : inline;
}
#menu a {
padding : 5px 15px;
text-transform : uppercase;
text-decoration : none;
font-size : 11px;
font-weight : bold;
color : #f1f1f1;
}
#menu a:hover {
background-color : #538cb9;
}
#space {
border : 1px solid #224080;
padding-left : 10px;
background-color : #538cb7;
color : #c5c752;
padding-top : 5px;
padding-bottom : 5px;
}
#header {
height : 150px;
background-color : #ffffff;
background-image : url(bussinesblue-images/header.jpg);
background-repeat : no-repeat;
border-top : 1px solid #ccc;
margin-bottom : 1px;
}
#header h1 {
color : #538cb6;
font-size : 1.9em;
padding-left : 110px;
padding-top : 20px;
}
#header h2 {
color : #538cb8;
font-size : 1.2em;
padding-left : 110px;
padding-top : 5px;
}
#header h3 {
color : #8ac752;
float : right;
font-size : 25px;
margin-top : -60px;
margin-right : 60px;
}
#maintext {
border-right : 1px solid #ccc;
margin : 0 0 0 0;
display : inline;
padding : 4px;
width : 67.8%;
float : left;
min-height : 300px;
background-color : #f2f2f2;
}
* html #maintext {
height : 300px;
}
#maintext p {
margin-bottom : 10px;
}
blockquote {
border : 1px solid #c5c5c5;
padding-top : 5px;
padding-left : 10px;
padding-bottom : 5px;
padding-right : 10px;
margin : 10px;
text-align : center;
}
.inset {
float : right;
width : 265px;
padding : 5px;
border : 1px solid #538cb7;
margin : 5px 0 0 5px;
background : #d0e3f7;
font-size : 85%;
}
#maintext h1 {
font-size : 1.6em;
color : #95ad85;
margin-bottom : 10px;
margin-top : 15px;
}
#maintext h2 {
font-size : 1.4em;
color : #95ad85;
margin-bottom : 10px;
margin-top : 20px;
}
#maintext p {
text-align : justify;
}
#rightcolumn {
margin : 0 0 0 0;
display : inline;
width : 29.9%;
float : left;
background-color : #fff;
min-height : 300px;
}
* html #rightcolumn {
height : 300px;
}
#rightcolumn h1 {
font-size : 1.3em;
padding-left : 10px;
margin-top : 10px;
margin-bottom : 15px;
color : #8ac752;
}
#rightcolumn h2 {
font-size : 1.2em;
padding-left : 10px;
margin-top : 10px;
margin-bottom : 15px;
color : #8ac752;
}
#rightcolumn p {
padding : 10px;
margin-top : 10px;
margin-bottom : 15px;
margin-left : 1em;
text-align : justify;
background-color : #f2f2f2;
}
#navcontainer {
width : 220px;
padding : 0 0 1em 1em;
margin-bottom : 1em;
font-family : Verdana;
color : #333;
text-transform : uppercase;
}
#navcontainer ul {
list-style : none;
margin : 0;
padding : 0;
border : none;
}
#navcontainer li {
border-bottom : 1px solid #000000;
margin : 0;
}
#navcontainer li a {
display : block;
padding : 5px 5px 5px 0.5em;
background-color : #ffffff;
color : #888888;
text-decoration : none;
width : 100%;
}
html > body #navcontainer li a {
width : auto;
}
#navcontainer li a:hover {
background-color : #538cb7;
color : #fff;
}
#footer {
background-color : #ffffff;
display : inline;
float : left;
width : 100%;
height : 45px;
background-image : url(bussinesblue-images/footer.jpg);
background-repeat : no-repeat;
background-position : bottom;
text-align : center;
}
#footer p {
margin-top : 10px;
}
#footer a {
color : #8ac752;
}
#blueBox {
border : 1px solid #538cb7;
background : #ffffff;
}
#blueBox p {
clear : both;
color : #aaaaaa;
font-weight : bold;
padding-left : 8px;
}
#blueBox h1 {
padding : 7px 0 4px 7px;
margin : 0;
font : normal 22px/22px "Arial Black", Arial, sans-serif;
color : #ffffff;
background-color : #538cb7;
text-transform : uppercase;
}
#blueBox h2 {
padding : 0 0 8px 8px;
margin : 0;
background-color : #538cb7;
color : #ffffff;
font : bold 12px/12px Arial, sans-serif;
}
.boxColumn {
padding : 20px 2px 10px 13px;
float : left;
overflow : hidden;
width : 170px;
voice-family : "\"}\"";
voice-family : inherit;
width : 160px;
}
.boxColumn p {
color : #000000;
font-weight : normal;
padding : 0;
}
#wrapper .boxColumn h1 {
font : bold 11px/11px Verdana, Arial, sans-serif;
background-color : #ffffff;
color : #8ac752;
margin-bottom : 2px;
padding : 0;
}
.separator {
clear : both;
margin-bottom : 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="head">
<h1>Two Column Business Template</h1>
<p>by get css templates for free</p>
<ul>
<li><a href="#">Home</a> :</li>
<li><a href="#">Sitemap</a> :</li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="menu">
<ul>
<li><a href="http://www.getcsstemplates.com">Free Templates</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</div>
<div id="header">
<h1>My Business Site</h1>
<h2>Lorem ipsum dolor sit amet</h2>
<h3>Call Us <br/>0 800 123 4567</h3>
</div>
<div id="space">
Vestibulum feugiat lectus ut magna
</div>
<div id="maintext">
<blockquote>
<p><strong>TWO COLUMN BUSINESS TEMPLATE</strong> is a free template from <a href="http://www.getcsstemplates.com">Get CSS Templates for Free</a>. You can link back to my site if you decide to use this template but you don't have to.</p>
</blockquote>
<h1>This is maintext area H1 Tag</h1>
<img src="bussinesblue-images/globe.jpg" class="floatTL" alt="Image of the Globe" />
<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, 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; <a href="">Ut eget augue</a> in velit elementum bibendum. 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.
</p>
<h2>This is maintext area H2 Tag</h2>
<img src="bussinesblue-images/globe.jpg" class="floatTR" alt="Image of the Globe" />
<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; <a href="">Ut eget augue</a> in velit elementum bibendum. 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. Ut interdum ipsum nec metus. In vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere luctus eget.
</p>
<div id="blueBox">
<h1>Lorem ipsum dolor sit amet</h1>
<h2>Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat...</h2>
<div class="boxColumn">
<h1>Morbi commodo, ipsum sed pharetra</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. <a href="#">Suspendisse id velit vitae ligula volutpat</a>.</p>
</div>
<div class="boxColumn">
<h1>Morbi commodo, ipsum sed pharetra</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed neque, id pulvinar odio lorem turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. <a href="#">Suspendisse id velit vitae ligula volutpat condimentum</a>.</p>
</div>
<div class="boxColumn">
<h1>Morbi commodo, ipsum sed pharetra</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. <a href="#">Suspendisse id velit vitae ligula volutpat</a>.</p>
</div>
<p>Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.</p>
</div>
<div class="separator">
<!-- x -->
</div>
</div>
<div id="rightcolumn">
<h1>Lorem Ipsum</h1>
<div id="navcontainer">
<ul id="navlist">
<li id="active">
<a href="http://www.getcsstemplates.com" id="current" name="current">Free Templates</a>
</li>
<li>
<a href="index.html">Link two</a>
</li>
<li>
<a href="index.html">Link three</a>
</li>
<li>
<a href="index.html">Link four</a>
</li>
<li>
<a href="index.html">Link five</a>
</li>
</ul>
</div>
<h2>Dolor Sit Amet</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; Ut eget augue in velit elementum bibendum. Duis sem urna, dictum ac, vehicula in, luctus eget, lectus. Aliquam erat volutpat. Ut interdum ipsum nec metus. In vestibulum ante entum. Aliquam erat volutpat.</p>
</div>
</div>
<div id="footer"><p><a href="http://validator.w3.org/">Valid CSS</a> :: <a href="http://validator.w3.org/">Valid XHTML</a> <br /> 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>
</body>
</html>
Related examples in the same category