CSS positioning
<!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" lang="en-US">
<head>
<title>Welcome to Company</title
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type='text/css'>
.promo-outer {
position: relative;
width: 560px;
}
.promo {
display: table;
width: 560px;
border: 2px solid #5a3811;
border-collapse:collapse;
}
.promo .arrivals {
width: 160px;
display: table-cell;
border: 2px solid #5a3811;
padding: 10px;
background-color: #e7dbcd;
}
.promo .news {
width: 340px;
display: table-cell;
border: 2px solid #5a3811;
padding: 10px 10px 20px 10px;
}
.promo h1 {
font-size: 110%;
font-weight: normal;
color: #5a3811;
}
.promo ul {
list-style:none;
}
.promo p, .promo li {
font-size: 75%;
line-height: 1.6em;
padding-bottom: 1em;
}
#allnewslink {
position: absolute;
bottom: 2px;
right: 12px;
padding: 0;
}
a:link, a:visited {
color: #5a3811;
background-color: transparent;
}
</style>
</head>
<body>
<div class="promo-outer">
<div class="promo">
<div class="arrivals">
<h1>New arrivals!</h1>
<p>Meet our new arrivals - our baby rhino and giraffe are
drawing the crowds this season.</p>
</div>
<div class="news">
<h1>Latest news</h1>
<ul>
<li>Sed nec erat sed sem molestie congue.
Cras lacus sapien, <a href="http://www.example.com">ultrices ac...</a></li>
<li>Aliquam egestas arcu a massa. In hendrerit
<a href="http://www.example.com">odio eget lectus...</a></li>
<li>Sed nec erat sed sem molestie congue.
Cras lacus sapien, <a href="http://www.example.com">ultrices ac...</a></li>
<li>Aliquam egestas arcu a massa. In hendrerit
<a href="http://www.example.com">odio eget lectus...</a></li>
<li id="allnewslink"><a href="http://www.example.com">All news items</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category