Side bar contains list
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sidebar</title>
<style type="text/css">
#wrapper {
width: 760px;
margin: 15px auto 0 auto;
text-align: left;
}
h1 {
border: 1px solid black;
}
.sidebar {
width: 220px;
float: right;
margin: 10px;
padding-bottom: 75px;
}
.sidebar h3 {
margin: 0;
padding: 5px;
}
.sidebar ul {
color: #666;
font-size: 1.2em;
margin: 0;
padding: 10px 5px 0 5px;
border: 1px solid #ddd;
}
.sidebar li {
list-style: none;
padding-left: 18px;
margin-bottom: 6px;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Header</h1>
<div class="sidebar">
<h3> header of sidebar</h3>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
</div>
<h2>this is a test. this is a test. </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.</p>
<h2>this is a test. this is a test. </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure. </p>
<h2>this is a test. </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure. </p>
</div>
</body>
</html>
Related examples in the same category