|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Positioning Example</title>
<style rel="stylesheet" type="text/css">
#page {
width: 800px;
position: absolute;
top: 10px;
left: 10px;
background-color: #ffffff;
}
#masthead {
border: 1px solid #cccccc;
}
#sideNav {
float: left;
width: 150px;
background-color: #F5f7f7;
border: 1px solid #cccccc;
}
#content {
margin: 0px 0px 0px 150px;
border-left: 1px solid #cccccc;
}
.item {
padding: 10px;
min-height: 75px;
height: 75px;
}
#sideNav a:link,#sideNav a:visited {
display: block;
padding: 5px;
}
#sideNav a:hover {
background-color: #d6d6d6;
}
</style>
</head>
<body>
<div id="page">
<div id="masthead">
<h2>Masthead</h2>
</div>
<div id="sideNav">
<a href="">one</a>
<a href="">two</a>
<a href="">three</a>
<a href="">four</a>
</div>
<div id="content">
<div class="item">
<h3>Item One</h3>
<p>
Lorem ipsum dolor sit amet.
</p>
</div>
<div class="item">
<h3>Item Two</h3>
<p>
Lorem ipsum dolor sit amet.
</p>
</div>
</div>
</div>
</body>
</html>
|