Post 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">
.current {
background: url(image-demo-2011/current_bg.jpg) top left no-repeat;
width: 659px;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #DBE0E8;
padding: 0 0 25px 0;
}
.current p {
display: block;
float: left;
width: 520px;
padding: 22px 0 0 35px;
}
.current_link {
display: block;
float: left;
margin: 15px 0 0 5px;
}
.post {
width: 269px;
height: 312px;
float: left;
background: url(image-demo-2011/post_bg.gif) top left no-repeat;
padding: 15px 28px 0 25px;
margin: 0 15px 11px 0;
}
.post span {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #0893EF
}
.post h5 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #3E3E3E;
padding: 8px 0 10px 0;
}
.post p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #6D7072;
display: block;
margin: 13px 0;
}
.more {
display: block;
margin: 0 0 0 80px;
}
</style>
</head>
<body>
<div class="current">
<p>Illum secundum exerci erat plaga illum, enim, venio. Tamen causa ut diam torqueo sagaciter inhibeo si quae exerci lobortis. Appellatio vel hos autem, ludus luptatum mauris ratis jugis interdico. Gilvus consequat abico demoveo lenis validus typicus ut commodo.</p>
</div>
<div class="post">
<span>September 27th</span><br />
<h5>Name Post 1</h5>
<p>Illum secundum exerci erat plaga illum, enim, venio. Tamen causa ut diam torqueo sagaciter inhibeo si quae exerci lobortis. Appellatio vel hos autem, ludus luptatum mauris ratis jugis interdico. Gilvus consequat abico demoveo lenis validus typicus ut commodo.</p>
</div>
<div class="post">
<span>September 25th</span><br />
<h5>Name Post 2</h5>
<p>Illum secundum exerci erat plaga illum, enim, venio. Tamen causa ut diam torqueo sagaciter inhibeo si quae exerci lobortis. Appellatio vel hos autem, ludus luptatum mauris ratis jugis interdico. Gilvus consequat abico demoveo lenis validus typicus ut commodo.</p>
</div>
<div class="post">
<span>September 23th</span><br />
<h5>Name Post 3</h5>
<p>Illum secundum exerci erat plaga illum, enim, venio. Tamen causa ut diam torqueo sagaciter inhibeo si quae exerci lobortis. Appellatio vel hos autem, ludus luptatum mauris ratis jugis interdico. Gilvus consequat abico demoveo lenis validus typicus ut commodo.</p>
</div>
<div class="post">
<span>September 20th</span><br />
<h5>Name Post 4</h5>
<p>Illum secundum exerci erat plaga illum, enim, venio. Tamen causa ut diam torqueo sagaciter inhibeo si quae exerci lobortis. Appellatio vel hos autem, ludus luptatum mauris ratis jugis interdico. Gilvus consequat abico demoveo lenis validus typicus ut commodo.</p>
</div>
</div>
</body>
</html>
Related examples in the same category