Page Widget How to - Add sidebar with border and background

Question

We would like to know how to add sidebar with border and background.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#container {<!--from  w  ww  .j  a v  a  2 s .co m-->
  width: 960px;
  background-color: #EEE;
  margin: 0 auto;
  overflow: hidden;
}

#sidebar1 {
  float: left;
  width: 176px;
  border: 2px solid black;
  background-color: #EADCAE;
  padding: 0px 0px 100% 0px;
}

#content {
  padding: 10px 0;
  width: 600px;
  float: left;
}

#sidebar2 {
  float: left;
  width: 176px;
  border: 2px solid black;
  background-color: #EADCAE;
  padding: 0px 0px 100% 0px;
}
</style>
</head>
<body>
<body>
  <div id="container">
    <div id="sidebar1"></div>
    <div id="content">
      <h3>Lorem ipsum</h3>
      <p>Lorem ipsum dolor sit amet, ipsum animal dissentias et pro.
        Nec ad amet alii. Mel ne vero regione, vim ei odio novum. Decore
        necessitatibus vix id. Mei cibo tation necessitatibus no. Quot probo
        ad his. No omnes mollis mnesarchum per, his ullum tracta
        salutatus.</p>
    </div>
    <div id="sidebar2"></div>
  </div>
</body>
</body>
</html>

The code above is rendered as follows: