Three link layout
<!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" dir="ltr" lang="en-US"
xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style rel="stylesheet" type="text/css">
.column {
width: 134px;
float: left;
margin: 0 7px 0 0;
background-image: url(images/bg_c.gif);
background-position: top left;
background-repeat: repeat-y;
}
.column div {
width: 134px;
background-image: url(images/bg_c_b.gif);
background-position: bottom left;
background-repeat: no-repeat;
}
.column h4 {
font-family: Tahoma;
font-size: 11px;
color: #ECFEE2;
font-weight: normal;
text-transform: uppercase;
display: block;
width: 110px;
height: 37px;
line-height: 41px;
padding: 0 0 7px 25px;
background-position: top left;
background-repeat: no-repeat
}
.column .title1 {
background-image: url(images/title1_bg.gif);
}
.column .title2 {
background-image: url(images/title2_bg.gif);
}
.column .title3 {
background-image: url(images/title3_bg.gif);
}
.c2 {
margin-top: 33px
}
.c3 {
margin-top: 67px
}
.column ul {
margin: 7px 0 10px 20px;
list-style-type: none;
line-height: 18px;
}
.column li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #323232;
text-decoration: underline
}
.more2:visited,.more:visited,.column li a:visited {
text-decoration: underline
}
.more2:hover,.more:hover,.column li a:hover {
text-decoration: none
}
.more {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #009EDC;
text-decoration: underline;
margin: 0 0 0 19px;
}
</style>
</head>
<body>
<div id="columns">
<div class="column">
<div>
<h4 class="title1">Popular Tours</h4>
<ul>
<li><a href="#">Argentina</a></li>
<li><a href="#">Australia</a></li>
<li><a href="#">Brasilia</a></li>
<li><a href="#">China</a></li>
<li><a href="#">France</a></li>
<li><a href="#">England</a></li>
<li><a href="#">Jamaica</a></li>
<li><a href="#">Israel</a></li>
<li><a href="#">Italy</a></li>
<li><a href="#">Germany</a></li>
<li><a href="#">Netherlands</a></li>
<li><a href="#">Spain</a></li>
<li><a href="#">Russia</a></li>
<li><a href="#">Peru</a></li>
</ul>
<a href="#" class="more">more tours</a>
</div>
</div>
<div class="column c2">
<div>
<h4 class="title2">Hot Tours</h4>
<div class="pic">
<span><a href="#">Egypt</a></span>
</div>
<div class="pic">
<span><a href="#">Miami</a></span>
</div>
<div class="pic">
<span><a href="#">Russia</a></span>
</div>
<a href="#" class="more">more hot tours</a>
</div>
</div>
<div class="column c3">
<div>
<h4 class="title3">Top Hotel Deals</h4>
<ul>
<li><a href="#">hotels</a></li>
<li><a href="#">hotels</a></li>
<li><a href="#">hotels</a></li>
<li><a href="#">hotels</a></li>
<li><a href="#">hotels</a></li>
<li><a href="#">hotels</a></li>
<li><a href="#">hotels</a></li>
<li><a href="#">hotels</a></li>
<li><a href="#">hotels</a></li>
</ul>
<a href="#" class="more">more hotels</a>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category