Nested css table
<!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'>
#wrapper {
position: relative;
text-align: left;
width: 760px;
margin-right: auto;
margin-left: auto;
}
#header {
height: 180px;
background-image: url(images/header.jpg);
background-repeat: no-repeat;
padding-bottom: 10px;
}
#main {
display: table;
border-collapse:collapse;
}
#nav {
width: 180px;
display: table-cell;
background-color: #e7dbcd;
}
#content {
display: table-cell;
width: 560px;
padding-left: 10px;
}
#footer {
border-top: 2px solid #d7ad7b;
background-color: #e7dbcd;
font-size: 80%;
padding: 0.2em 10px 0.2em 0;
text-align:right;
}
h1 {
font-size: 150%;
font-weight: normal;
padding-bottom: 0.4em;
color: #5a3811;
}
p {
font-size: 80%;
line-height: 1.6em;
padding-bottom: 1em;
}
a:link, a:visited {
color: #5a3811;
background-color: transparent;
}
#nav ul {
list-style: none;
}
#nav li {
font-size: 80%;
width: 180px;
}
#nav a:link, #nav a:visited {
text-decoration: none;
color: #5a3811;
background-color: transparent;
display:block;
padding: 0.3em 10px 0.3em 10px;
border-bottom: 4px solid #d7c9b9;
}
#nav a:hover {
border-bottom: 4px solid #fff;
}
.promo {
display: table;
width: 560px;
border: 2px solid #5a3811;
border-collapse:collapse;
margin-bottom: 1em;
}
.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;
}
.promo h3 {
font-size: 110%;
font-weight: normal;
color: #5a3811;
}
.promo ul {
list-style:none;
}
.promo p, .promo li {
font-size: 75%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="nav">
<ul>
<li><a href="#">A</a></li>
<li><a href="#">H</a></li>
<li><a href="#">S</a></li>
<li><a href="#">P</a></li>
<li><a href="#">B</a></li>
</ul>
</div>
<div id="content">
<h1>Company</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus rhoncus ultrices
neque. Donec sem risus, convallis ut, interdum a, auctor egestas, sem. Aenean cursus.
Suspendisse non erat nec ante mollis pretium. Pellentesque mollis. Fusce est. Integer
sed diam at orci euismod tristique. Integer feugiat. Sed posuere erat interdum lectus.
Vivamus in nibh eu felis porttitor consequat. </p>
<div class="promo">
<div class="arrivals">
<h3>New arrivals!</h3>
<p>Meet our new arrivals - our baby rhino and giraffe are
drawing the crowds this season.</p>
</div>
<div class="news">
<h3>Latest news</h3>
<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>
</ul>
</div>
</div>
<p>Proin ligula velit, posuere ac, ullamcorper ut, rhoncus id, mauris. Curabitur velit.
Nunc varius facilisis dolor. Maecenas egestas sagittis ipsum. Vestibulum ultricies
aliquam ante. Morbi viverra lacus vitae lacus. Duis eleifend magna sit amet mi. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Donec malesuada ante vel arcu.
Suspendisse ac nisl a enim varius bibendum. Aenean diam urna, cursus consequat,
facilisis vitae, gravida quis, nisl. Suspendisse in erat sed ante dignissim faucibus.</p>
</div>
</div>
<div id="footer">© Company 2008 |
<a href="">Contact us</a>
</div>
</div>
</body>
</html>
Related examples in the same category