Inner left and right bar

Inner left and right bar : Siderbar : CSS Controls HTML CSS TUTORIALS

HTML CSS TUTORIALS » CSS Controls » Siderbar »

Inner left and right bar


 


<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#outer {
  width: 760px;
  position: relative;
  border: 1px solid #000;
}

h1#header {
  border: 1px solid #000;
  height: 100px;
  color: #fff;
}

h2#sub-header {
  border-bottom: 1px solid #000;
  background: #ccc;
  height: 1.5em;
  line-height: 1.5em;
  color: #fff;
}

#left {
  float: left;
  width: 558px;
}

#right {
  float: right;
  width: 190px
}

.left-content,.right-content {
  border: 1px solid #000;
  background: #aaa;
  margin: 15px
}

.right-content {
  background: #bbb;
  margin: 15px 13px 15px 0
}

.left-content-header,.right-content-header {
  padding: 5px;
  color: #fff;
  background: #ccc;
  border-bottom: 1px solid #000;
}

.right-content-header {
  height: auto;

}

.left-content-footer {
  border-top: 1px solid #000;
  background: #fff;
}

#footer {
  clear: both;
  height: 40px;
  border-top: 1px solid #000;
}

</style>
</head>
<body>
<div id="outer"> 
  <h1 id="header">Header</h1>
  <h2 id="sub-header">Sub Header Text</h2>
  <div id="left"> 
    <div class="left-content"> 
      <div class="left-content-header">blog header text</div>
      <p>left content</p>
      <p>left content</p>
      <p>left content</p>
      <p>left content</p>

      <div class="left-content-footer"> 
        <p>Footer text</p>
      </div>
    </div>
  </div>
  <div id="right"> 
    <div class="right-content"> 
      <div class="right-content-header">blog header text</div>
      <p>right content</p>

      <p>right content</p>
      <p>right content</p>
      <p>right content</p>
      <p>right content</p>
      <p>right content</p>
    </div>
  </div>
  <div id="footer">Footer</div>
</div>
</body>
</html>