using vertical line to separate footer
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Technical Support</title>
<style type='text/css'>
/* CSS Document */
body {
padding: 0px;
margin: 0 auto;
position: relative;
background: url(104x-images/header-bg.jpg) 0 0 repeat-x #EFEFEF;
color: #666;
font: 14px/20px Arial, Helvetica, sans-serif;
font-weight: normal;
}
div,p,h1,h2,h3,h4,ul,a,img {
padding: 0px;
margin: 0px;
}
ul {
list-style-type: none;
}
/* TOP PANEL */
#topPan {
width: 700px;
height: 252px;
position: relative;
margin: 0 auto;
padding: 0;
}
#topPan h1 {
width: 311px;
height: 215px;
background: url(104x-images/header-img1.jpg) 0 0 no-repeat #FEEBB0;
color: #fff;
text-indent: -2000px;
}
#topPan img {
width: 372px;
height: 91px;
position: absolute;
top: 124px;
right: 0px;
margin: 0px;
padding: 0px;
}
#topPan ul {
width: 376px;
height: 32px;
display: block;
position: absolute;
top: 215px;
right: 0px;
margin: 0px;
padding: 0px;
background: url(104x-images/menu-bg.gif) 0 0 repeat-x #FF8714;
color: #fff;
}
#topPan ul li {
float: left;
display: block;
width: 75px;
height: 32px;
background: url(104x-images/menu-devider.gif) right top no-repeat;
}
#topPan ul li span {
display: block;
width: 73px;
height: 32px;
background: url(104x-images/menu-hover.gif) 50% 0 no-repeat;
font: 13px/32px "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
text-decoration: none;
}
#topPan ul li a {
display: block;
width: 73px;
height: 32px;
background: url(104x-images/menu-bg.gif) 0 0 repeat-x #FF8714;
color: #fff;
font: 13px/32px "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
text-decoration: none;
}
#topPan ul li a:hover {
display: block;
width: 73px;
background: url(104x-images/menu-hover.gif) 50% 0 no-repeat;
text-decoration: none; /*position:fixed;*/
margin: 0;
padding: 0px;
}
#topPan ul li.contact {
display: block;
width: 75px;
height: 32px;
background: url(104x-images/menu-bg.gif) 0 0 repeat-x #FF8714;
color: #fff;
font: 13px/32px "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
text-decoration: none;
}
#topPan ul li.contact:hover {
display: block;
width: 75px;
background: url(104x-images/menu-hover.gif) 50% 0 no-repeat;
text-decoration: none; /*position:fixed;*/
margin: 0;
padding: 0px;
}
/* /TOP PANEL */
/* BODY PANEL */
#bodyPan {
width: 700px;
position: relative;
margin: 0 auto;
}
/* Left Panel */
#leftPan {
width: 247px;
height: 727px;
display: block;
float: left;
margin: 0;
padding: 27px 45px 0 44px;
}
#leftPan h2 {
width: 177px;
height: 83px;
float: left;
display: block;
background: url(104x-images/image1.jpg) 0 0 no-repeat #EFEFEF;
font: 27px/34px "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
color: #4D4D4D;
padding: 0 0 0 70px;
margin: 0;
}
#leftPan h2 span {
background: #EFEFEF;
color: #967001;
font: 14px/14px Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 0;
margin: 10px 0 0;
}
#leftPan h3 {
width: 247px;
display: block;
float: left;
background: none;
font-size: 18px;
font-weight: bold;
padding: 0;
margin: 0;
}
#leftPan p {
display: block;
padding: 0 0 24px 0;
}
#leftPan p.more {
height: 20px;
display: block;
margin: 0 0 13px 146px;
padding: 0;
}
#leftPan p.more a {
display: block;
width: 100px;
height: 20px;
background: #EFEFEF;
font: 14px/14px Georgia, "Times New Roman", Times, serif;
color: #BF4D02;
text-decoration: none;
font-weight: bold;
font-style: italic;
margin: 0;
padding: 0;
}
#leftPan p.more a:hover {
background: #EFEFEF;
color: #FF6500;
text-decoration: none;
}
#leftPan h4 {
width: 177px;
height: 70px;
float: left;
display: block;
background: url(104x-images/image2.jpg) 0 0 no-repeat #EFEFEF;
font: 27px/34px "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
color: #4D4D4D;
padding: 0 0 0 70px;
margin: 0;
}
#leftPan h4 span {
background: #EFEFEF;
color: #967001;
font: 14px/14px Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 0;
margin: 10px 0 0;
}
#leftPan ul {
width: 241px;
height: 271px;
display: block;
float: left;
margin: 0;
padding: 0;
}
#leftPan ul li.middle {
width: 22px;
height: 152px;
background: none;
float: left;
display: block;
padding: 0;
margin: 0;
}
#leftPan ul li {
width: 109px;
height: 122px;
display: block;
float: left;
background: url(104x-images/dot-line.gif) repeat-x 0 100%;
padding: 0 0 10px 0;
margin: 20px 0 0 0;
}
#leftPan ul li img {
width: 109px;
height: 105px;
display: block;
padding: 0;
margin: 0;
}
#leftPan ul li a {
width: 70px;
height: 20px;
display: block;
background: url(104x-images/arrow.gif) no-repeat 100% 50% #EFEFEF;
color: #BF4D02;
font: 12px/20px Georgia, "Times New Roman", Times, serif;
text-decoration: none;
text-align: center;
margin: 0 0 0 12px;
padding: 0;
}
#leftPan ul li a:hover {
text-decoration: underline;
display: block;
}
#leftworkPan {
width: 241px;
height: 271px;
display: block;
float: left;
margin: 10px 0 0;
padding: 0;
}
/* /Left Panel */
/* Right Panel */
#rightPan {
width: 359px;
height: 760px;
float: left;
display: block;
background: #FFF;
margin: 0 auto;
padding: 0;
color: #666;
}
#rightPan p {
padding: 0 63px 0 52px;
}
#rightPan p.paddingtop {
padding: 26px 63px 0 52px;
background: #FFF;
margin: 0 auto;
color: #666;
font: 14px/20px Georgia, "Times New Roman", Times, serif;
font-style: italic;
}
#rightPan p span.bigsize {
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #BF4D02;
font-size: 20px;
line-height: 20px;
background: #fff;
padding: 0;
}
#rightPan p.name {
background: #fff;
display: block;
color: #AC8101;
font: 18px/18px Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-weight: bold;
text-align: right;
padding: 10px 63px 16px 0;
}
#rightPan p.dotline {
background: url(104x-images/dot-line.gif) 0 0 repeat-x #fff;
color: #666;
margin: 0 63px 0 52px;
}
#rightPan h2 {
display: block;
width: 160px;
height: 64px;
background: url(104x-images/icon1.jpg) 0 0 no-repeat #fff;
font: 27px/30px "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
color: #4D4D4D;
padding: 1px 0 0 69px;
margin: 8px 0 0 52px;
}
#rightPan h2 span {
background: #fff;
color: #967001;
font: 14px/14px Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 0;
margin: 10px 0 0;
}
#rightPan p.bottompadding {
padding: 0 63px 22px 52px;
}
#rightPan p.more {
height: 28px;
display: block;
position: relative;
margin: 0;
padding: 13px 0 38px 200px;
}
#rightPan p.more a {
display: block;
width: 100px;
height: 20px;
background: #fff;
font: 14px/14px Georgia, "Times New Roman", Times, serif;
color: #BF4D02;
text-decoration: none;
font-weight: bold;
font-style: italic;
margin: 0;
padding: 0;
}
#rightPan p.more a:hover {
background: #fff;
color: #FF6500;
text-decoration: none;
}
#rightPan img {
width: 278px;
height: 154px;
padding: 0;
margin: 0 0 62px 40px;
}
/* /Right Panel */
/* footer Panel */
#mainfooterbody {
height: 114px;
background: url(104x-images/footer-bg.gif) 0 0 repeat-x #4D4D4D;
color: #fff;
padding: 90px 0 0 0;
position: relative;
margin: 0 auto;
clear: both;
}
#footerPan {
width: 650px;
height: 82px;
position: relative;
margin: 0 auto;
padding: 0 0 0 50px;
}
#footerPan ul {
width: 330px;
display: block;
position: absolute;
right: 0px;
top: 26px;
padding: 0;
}
#footerPan li {
float: left;
font: 12px/15px "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
}
#footerPan ul li a {
padding: 0 0 0 10px;
color: #fff;
background: #424242;
text-decoration: none;
}
#footerPan ul li a:hover {
text-decoration: underline;
}
#footerPan ul li a.padl {
padding: 0 0 0 14px;
}
#footerPan ul.templateworld {
width: 158px;
background: #4C4C4C;
color: #fff;
display: block;
position: absolute;
top: 74px;
right: 80px;
}
#footerPan ul.templateworld li a {
background: #4C4C4C;
display: block;
color: #fff;
text-decoration: none;
}
#footerPan ul.templateworld li a:hover {
text-decoration: underline;
}
#footerPan p {
background: #484848;
margin: 54px 45px 0 0;
display: block;
position: absolute;
top: 0px;
right: 40px;
color: #FF833B;
font: 11px/15px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#footerPanleft {
width: 285px;
height: 82px;
float: left;
margin: 0 auto;
background: url(104x-images/vertical-dot.gif) 100% 0 repeat-y;
}
#footerPanleft img {
width: 260px;
height: 35px;
margin: 22px 0 0 0;
}
</style>
</head>
<body>
<!-- topPan-->
<div id="topPan">
<h1>Clients and Solutions</h1>
<a href="index.html"><img src="104x-images/logo.gif" title="Technical Support" alt="Technical Support" width="372" height="91" border="0" /></a>
<ul>
<li><span>Home</span></li>
<li><a href="#">About us</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Clients</a></li>
<li class="contact"><a href="#" class="contact">Contact</a></li>
</ul>
</div>
<!--topPan close-->
<!--bobyPan -->
<div id="bodyPan">
<!--leftPan -->
<div id="leftPan">
<h2>Updates<br />
<span>release of Letraset</span></h2>
<h3>25th march.2006</h3>
<p>Lorem ipsum dolor sit amet, conDonec sectetuer adipiscing elit. Donec vitae le Integer blandit ante iaculis arcu. </p>
<p>Vivamus magna orci, tincidunt scelerisque, sagittis commodo, ultrices sed, nulla. Phasellus dui lectus, molestie qui
s, molestie sed, tempus eu, nunc. Vestibulum velit mi, vulputate </p>
<p class="more"><a href="#">....Read More</a></p>
<h4>Our works<br />
<span>release of Letraset</span></h4>
<div id="leftworkPan">
<ul>
<li> <img src="104x-images/workimg1.jpg" alt="" width="109" height="105" align="top" /><a href="#">visit site</a></li>
<li class="middle"> </li>
<li> <img src="104x-images/workimg3.jpg" alt="" width="109" height="105" align="top" /><a href="#">visit site</a></li>
<li><img src="104x-images/workimg2.jpg" alt="" width="109" height="105" align="top" /><a href="#">visit site</a></li>
<li class="middle"> </li>
<li> <img src="104x-images/workimg4.jpg" alt="" width="109" height="105" align="top" /><a href="#">visit site</a></li>
</ul>
</div>
</div>
<!--leftPan close -->
<!--rightPan -->
<div id="rightPan">
<p class="paddingtop"><span class="bigsize">“</span>If you are interested in seeing more of our free web template designs feel free to visit our website, Template World. We intend to add at least 25 new free templates in the coming month.<span class="bigsize">"</span></p>
<p class="name">- Sharon Anderson</p>
<p class="dotline"> </p>
<h2>Developments<br />
<span>release of Letraset</span></h2>
<p class="bottompadding">Technical Support is a free, tableless, W3C-compliant web design layout by Template World. This template has been tested and proven compatible with all major browser environments and operating systems. You are free to modify the design to suit your tastes in any way you like.</p>
<p>We only ask you to not remove "Design by Template World" and the link http://www.templateworld.com from the footer of the template.</p>
<p class="more"><a href="#">....Read More</a></p>
<a href="#"><img src="104x-images/online.jpg" title="Online support" alt="Online support" width="278" height="154" border="0" /></a></div>
</div>
<!--bodyPan close -->
<!--mainfooter body-->
<div id="mainfooterbody">
<div id="footerPan">
<div id="footerPanleft">
<a href="index.html"><img src="104x-images/logo2.jpg" title="Technical Support" alt="Technical Support" width="260" height="35" border="0" /></a></div>
<ul>
<li><a href="#">Home </a>| </li>
<li><a href="#">About us</a> | </li>
<li><a href="#">Support </a>| </li>
<li><a href="#">Clients</a> | </li>
<li><a href="#">Contact </a> </li>
</ul>
<p>>> technical support all right reaserved</p>
<ul class="templateworld">
<li>Design By:</li>
<li><a href="http://www.templateworld.com" target="_blank">Template World</a></li>
</ul>
</div>
</div>
</body>
</html>
Related examples in the same category