Two columns with sidebar
<!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">
#content {
width: 721px;
float: left;
background-image: url(images/corner.gif);
background-position: top left;
background-repeat: no-repeat;
position: relative;
padding: 59px 0 20px 19px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #595959
}
.bigblock {
width: 480px;
float: left;
padding: 18px 29px 0 20px;
}
.bigblock p {
padding: 9px 0 5px 3px
}
.bigblock a,#list div a {
color: #2083B6;
font-size: 12px;
display: block;
float: left;
margin: 2px 0 0 3px;
text-decoration: underline
}
.bigblock a:visited,#list div a:visited {
text-decoration: underline
}
.bigblock a:hover,#list div a:hover {
text-decoration: none
}
.news {
width: 188px;
float: left;
padding: 16px 0 96px 2px;
}
.news img {
margin: 0 0 14px 51px
}
.newsblock {
padding: 0 0 15px 0
}
.newsblock p {
font-family: Tahoma;
font-size: 11px;
color: #808080;
padding: 0 5px 7px 15px
}
.newsblock p a {
color: #2083B6;
text-decoration: underline
}
.newsblock p a:visited {
text-decoration: underline
}
.newsblock p a:hover {
text-decoration: none
}
.newsblock .date {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #D4E9F0;
display: block;
width: 169px;
line-height: 19px;
background-color: #0F6A8B;
padding: 0 0 0 11px;
margin: 0 0 10px 5px;
}
</style>
</head>
<body>
<div id="content">
<div class="bigblock">
<img src="images/title1.gif" width="136" height="33" /><br />
<p>Lorem ipsum dolor sit amet, consectetuer adipi scing elit.Mauris urna urna, varius et, interdum a, tincidunt quis, libero. Aenean sit amturpis.</p>
<p>Maecenas hendrerit, massa ac laoreet iaculipede mnisl ullamcorpermassa, cosectetuer feipsum eget pede. Proin nunc. Donec nonummy, tellus er sodales enim, in tincidunmauris in odio. Massa ac laoreet iaculipede nisl ullamcorpermassa, ac consectetuer feipsum eget pede. Proin nunc. Donec massa. Nulla pulvinar, nisl ac convallis nonummy, tellus eros sodales enim, in tincidunt mauris in odio. massa ac laoreet iaculipede niorpermassa,consectetuer feipsum eget pede. Proin nunc. Donec massa. Nulla pulvinar, nisl ac convallis nonummy, tellus eros sodales enim, in tincidunt mauris in odio. Lorem ipsum dolor sit amet, consectetuer adipi scing elit.Mauris urna urna, varius et, interdum a, tincidunt quis, libero. Aenean sit amturpis. </p>
<p>Maecenas hendrerit, massa ac laoreet iaculipedenisl ullamcorpermassa, ac consectetuer feipsum eget pede. Proin nunc. Donec massa. Nulla pulvinar, nisl ac convallis nonummy, tellus eros sodales enim, in tincidunt mauris in odio. massa ac laoreet iaculipede nisl ullamcorpermassa, ac consectetuer feipsum eget pede. Proin nunc. Donec massa. Nulla pulvinar, nisl ac convallis nonummy, tellus eros sodales enim, in tincidunt mauris in odio. massa ac laoreet iaculipede nisl ullamcorpermassa,consectetuer feipsum eget pede. Proin nunc. Donec massa. Nulla pulvinar, nisl ac convallis nonummy, tellus eros sodales enim, in tincidunt mauris in odio. </p>
<p>Maecenas hendrerit, massa ac laoreet iaculipede mnisl ullamcorpermassa, cosectetuer feipsum eget pede. Proin nunc. Donec nonummy, tellus er sodales enim, in tincidunmauris in odio. Massa ac laoreet iaculipede nisl ullamcorpermassa, ac consectetuer feipsum eget pede. </p>
<a href="#">Our Services</a>
</div>
<div class="news">
<img src="images/title2.gif" alt="" width="83" height="33" /><br />
<div class="newsblock">
<p class="date">23 december</p>
<p>Lorem ipsum dolor sit asectetuer adip scing elit mauris urna urna, unt quis, libero. Maecenas hen- drerit, massa ac laoreet iaculip- edenisl ullamcorpermassa.</p>
<p><a href="#">read more</a></p>
</div>
<div class="newsblock">
<p class="date">11 december</p>
<p>Lorem ipsum dolor sit asectetuer adip scing elit mauris urna urna, unt quis, libero. Maecenas hendrerit, massa ac laoreet iaculipedenisl. Donec massa. Nulla pulvinar, nisl ac convallis nonummy, tellus eros sodales enim, in tincidunt mauris in odio. massa ac laoreet iaculipede nisl ullamcorpermassa.</p>
<p><a href="#">read more</a></p>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category