Top and left navigational bar and three columns
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Positioning Example</title>
<style rel="stylesheet" type="text/css">
body {
color: #333;
margin: 0px;
padding: 0px;
background-color: #ccc;
}
#page {
position: absolute;
top: 10px;
left: 10px;
width: 800px;
background-color: #fff;
}
#masthead {
border-bottom: 1px solid #ccc;
}
#topNav {
border-bottom: 1px solid #ccd;
padding: 5px;
background-color: #e7e;
}
#topNav a:link,#topNav a:visited {
padding: 0px 5px 0px 5px;
}
#sideNav {
float: left;
width: 150px;
background-color: #F5f;
border-bottom: 1px solid #ccc;
}
#sideRight {
float: right;
width: 150px;
background-color: #F5f7f7;
border-bottom: 1px solid #ccc;
}
#content {
margin: 0px 150px 0px 150px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#footer {
clear: both;
border-top: 1px solid #ccc;
padding: 10px;
}
.item {
padding: 10px;
min-height: 75px;
height: 75px;
}
#search {
position: absolute;
top: 10px;
right: 10px;
z-index: 100;
}
#sideNav a:link,#sideNav a:visited {
display: block;
padding: 5px;
}
#sideNav a:hover {
background-color: red;
}
</style>
</head>
<body>
<div id="page">
<div id="masthead">
<h2>Masthead</h2>
</div>
<div id="topNav">
<a href="#">Top link one</a>
<a href="#">Top link two</a>
<a href="#">Top link three</a>
<a href="#">Top link four</a>
<a href="#">Top link five</a>
</div>
<div id="sideNav">
<a href="#">Left link one</a>
<a href="#">Left link two</a>
<a href="#">Left link three</a>
<a href="#">Left link four</a>
</div>
<div id="sideRight">
This is a test.
</div>
<div id="content">
<div class="item">
<h3>Item One</h3>
<p>
This is a test.
</p>
</div>
<div class="item">
<h3>Item Two</h3>
<p>
This is a test.
</p>
</div>
</div>
<div id="footer">
Footer
</div>
<form id="search" action="">
<input type="text" name="txtSearch" size="12">
<input type="submit" name="submit" value="Search">
</form>
</div>
</body>
</html>
Related examples in the same category