TWO COLUMN CSS BUSINESS WEBSITE TEMPLATE
<!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=iso-8859-1" />
<title>TWO COLUMN CSS BUSINESS WEBSITE TEMPLATE</title>
<style type='text/css'>
* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
img {
padding: 3px;
border: 1px solid #d0660a;
}
img.floatTL {
float: left;
margin-right: 7px;
margin-bottom: 2px;
margin-top: 2px;
margin-left: 10px;
}
img.floatTR {
float: right;
margin-left: 7px;
margin-bottom: 2px;
margin-top: 2px;
margin-right: 10px;
}
#menu {
width: 780px;
height: 75px;
margin: 0 auto;
background: url(41freecsstemplate-images/img03b.jpg) no-repeat right 5px;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: block;
float: left;
width: 152px;
height: 60px;
padding: 0 0 0 2px;
background: url(41freecsstemplate-images/img02a.gif) no-repeat;
}
#menu a {
display: block;
width: 108px;
height: 36px;
padding: 25px 20px 0 20px;
background: url(41freecsstemplate-images/img03b.jpg) no-repeat 0 10px;
text-align: center;
font-size: 0.9em;
color: #034a03;
text-transform: uppercase;
font-weight: bold;
}
#wrapper {
margin: 15px auto 0 auto;
width: 794px;
background: url(41freecsstemplate-images/img02a-1.jpg) repeat-x left top;
}
#leftcolumn {
color: #333;
border: 1px solid #ccc;
margin: 5px 0 5px 0;
padding: 10px;
height: 745px;
width: 220px;
float: left;
background-image: url(41freecsstemplate-images/wbg.gif);
background-repeat: repeat-x;
background-color: #adce33;
}
.logo {
background-image: url(41freecsstemplate-images/logopic.jpg);
width: 190px;
height: 220px;
background-repeat: no-repeat;
margin-left: 15px;
margin-top: 7px;
}
.logo h2 {
padding-top: 168px;
font-size: 1.8em;
font-weight: lighter;
padding-left: 23px;
}
.blue {
color: #0f1702;
}
.orange {
color: #d0660a;
}
.logo h3 {
font-size: 0.9em;
color: #0f1702;
padding-left: 22px;
}
.logo a {
color: #f4fdae;
}
#leftcolumn h4 {
font-size: 1.6em;
font-weight: lighter;
color: #d0660a;
padding-top: 17px;
}
.leftlinks ul {
padding: 3px 0 8px 0;
}
.leftlinks li {
line-height: 18px;
list-style: square;
padding-left: 0;
margin-left: 21px;
color: #f4fdae;
}
.leftlinks a {
text-decoration: none;
color: #f4fdae;
font-weight: bold;
}
.bottomleft {
margin-top: 15px;
}
.bottomleft h5 {
font-size: 1.4em;
font-weight: lighter;
color: #d0660a;
padding-bottom: 10px;
}
.bottomleft p {
font-size: 1.1em;
text-align: justify;
margin-bottom: 1em;
}
.bottomleft a {
color: #d0660b;
}
#rightcolumn {
float: right;
color: #333;
border: 1px solid #ccc;
margin: 5px 0 5px 0;
height: 753px;
width: 525px;
display: inline;
position: relative;
background-image: url(41freecsstemplate-images/wbg.gif);
background-repeat: repeat-x;
background-color: #adce33;
padding-top: 2px;
padding-left: 10px;
padding-bottom: 10px;
padding-right: 10px;
}
#rightcolumn h1 {
float: right;
font-size: 1.5em;
font-weight: lighter;
color: #0f1702;
letter-spacing: -1px;
word-spacing: -2px;
}
#rightcolumn h2 {
color: #d0660a;
font-size: 1.7em;
font-weight: lighter;
letter-spacing: -1px;
word-spacing: -2px;
}
#rightcolumn h4 {
color: #d0660a;
font-weight: lighter;
font-size: 1.5em;
padding-left: 10px;
padding-bottom: 10px;
}
.rightpic {
width: 520px;
height: 220px;
background-image: url(41freecsstemplate-images/rightpic.jpg);
background-repeat: no-repeat;
margin-top: 25px;
}
.topright {
text-align: justify;
padding: 15px;
}
#rightcolumn a {
text-decoration: none;
color: #f4fdae;
}
.bottomtext {
text-align: justify;
padding: 5px;
}
.bottomtext p {
font-size: 1.1em;
}
#footer {
background-color: #adce33;
display: inline;
float: left;
width: 100%;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
#footer p {
color: #f7f7f7;
}
#footer a {
color: #d0660a;
}
</style>
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<div id="menu">
<ul>
<li><a href="#" title="">Free Tempates</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>
<!-- Begin Left Column -->
<div id="leftcolumn">
<div class="logo"> <h2 class="top"><span class="blue">website</span><span class="orange">dot</span><span class="blue">com</span></h2>
<h3 class="top"><a href="http://www.getcsstemplates.com">business website template</a></h3>
</div>
<h4>More Links</h4>
<div class="leftlinks">
<ul>
<li><a href="http://www.getcsstemplates.com" title="Free CSS Templates">Free Website Templates</a></li>
<li><a href="#" title="#">Link 2</a></li>
<li><a href="#" title="#">Link 3</a></li>
<li><a href="#" title="#">Link 4</a></li>
<li><a href="#" title="#">Link 5</a></li>
<li><a href="#" title="#">Link 6</a></li>
</ul>
</div>
<div class="bottomleft">
<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>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="rightcolumn">
<h1><a href="#">Lorem Ipsum Dolor Sit</a></h1>
<div class="rightpic"></div>
<h2><strong>Lorem ipsum</strong> dolor sit amet consectetuer</h2>
<div class="topright"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interedum ipsum nec mettus.</p>
</div>
<h4>Lorem ipsum</h4>
<img src="41freecsstemplate-images/pic1.jpg" class="floatTL" alt="Image" />
<p><strong>Lorem ipsum dolor</strong> 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 In faucibus orci luctus et ultrices posuere cubilia Curae; <a href="#">Ut eget augue</a> in velit elementum bibendum. Donec rutrum neque eu nisl. Morbi eget felis.</p>
<br/>
<img src="41freecsstemplate-images/pic2.jpg" class="floatTL" alt="Image" />
<p><strong>Lorem ipsum dolor</strong> 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 In faucibus orci luctus et ultrices posuere cubilia Curae; <a href="#">Ut eget augue</a> in velit elementum bibendum. Donec rutrum neque eu nisl. Morbi eget felis.</p>
<br/>
<img src="41freecsstemplate-images/pic3.jpg" class="floatTL" alt="Image" />
<p><strong>Lorem ipsum dolor</strong> 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 In faucibus orci luctus et ultrices posuere cubilia Curae; <a href="#">Ut eget augue</a> in velit elementum bibendum. Donec rutrum neque eu nisl. Morbi eget felis.</p>
<br/>
<div class="bottomtext">
<p> 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.</p>
</div>
</div>
<!-- End Right Column -->
<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">FREE WEB TEMPLATES</a> </p> </div>
</div>
<!-- End Wrapper -->
</body>
</html>
Related examples in the same category