HTML divisions
<!DOCTYPE html>
<html>
<head>
<title>Example 2.18</title>
<style type="text/css">
body { padding: 0 36px; }
h1 { font-family: sans-serif; padding-top: 60px; }
#header { margin-bottom: 36px; }
#header img { float: left; }
#header a { text-decoration: none; }
#top-menu,
#bottom-menu { margin-left: -36px; }
#top-menu li { float: left;
padding: 5px;
border: 1px solid;
list-style: none;
margin-right: 5px; }
#bottom-menu li { float: left;
padding: 0 10px;
border-right: 1px solid;
list-style: none; }
div.navigation { clear: left; font-family: arial,sans-serif;}
address { clear: left; text-align: right; padding-top: 36px;}
</style>
</head>
<body>
<div id="header"> <!-- Logo and main menu -->
<div id="logo">
<img src="../images/logo.gif" alt="Logocorp Inc."/>
<h1>Welcome to Logocorp</h1>
</div>
<div class="navigation">
<ul id="top-menu">
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="what.html">...</a></li>
</ul>
</div>
</div>
<hr/>
<div id="content"> <!-- content division -->
<h2>News</h2>
<p>We are doing good things... </p>
<p>Logos are everywhere... </p>
</div>
<hr />
<div id="footer"> <!-- page footer -->
<div class="navigation">
<ul id="bottom-menu">
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="what.html">...</a></li>
</ul>
</div>
<address>copyright © 2010, , Inc.</address>
</div>
</body>
<html>
Related examples in the same category