Side bar contains list : Siderbar : CSS Controls HTML CSS TUTORIALS


HTML CSS TUTORIALS » CSS Controls » Siderbar »

 

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 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>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo CSS Controls
» Siderbar