title: HTML 2 column layout - Applying background color the top level container
body: <p>I am trying to create a 2 column layout with my html and its just not happening. Here's my code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;title&gt;Welcome&lt;/title&gt;
  &lt;style&gt;
  body {
      margin: 0;
      padding: 0;
      width: 100%;
      color: black;
      font: normal 12px/1.8em Arial, Helvetica, sans-serif;
      background-color: #132959;
      background-repeat: repeat;
      background-position: left top;
  }
  
  
  .outer{
      width:970px;
      margin: 0 auto;
      background: black;
  }
  
  .toc{
      width:250px;
      margin: 0;
      padding:0;
      float:left;
      color:yellow;
  }
  
  .content{
      padding: 0;
      width:720px;
      float:right;
      color:white;
  }
  .container{
      width:970px;
      margin: 20px auto;
  }
  
  .logo {
      margin: 0;
      padding: 0;
      float: left;
      width: auto;
  }
  
  .logo a{
      color : #fff;
      text-decoration:none;
      font: bold 40px/1.2em Arial, Helvetica, sans-serif;
      letter-spacing: -2px;
  }
  
  .logo small {
      display: block;
      padding-left: 80px;
      font: normal 12px/1.2em Arial, Helvetica, sans-serif;
      color: #EDF3F6;
      letter-spacing: normal;
  }
  
  .logoimage {
      height: 50px;
      border: none;
      margin: 0;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
  &lt;div class="logo"&gt; 
      &lt;a href="http://www.csmart.co.in"&gt;Csmart 
      &lt;small&gt;Let's make life easy!&lt;/small&gt; &lt;/a&gt; 
  &lt;/div&gt;
  &lt;div style="clear:both;padding:15px"/&gt;
  &lt;div class="outer"&gt;
    &lt;div class="toc"&gt; 
    TOC
    &lt;/div&gt;
    &lt;div class="content"&gt;
      Welcome
    &lt;/div&gt;&lt;!-- content --&gt;
  &lt;/div&gt;&lt;!-- outer--&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
     </p>
  
  <p>My div outer is coloured black. But it does not show up on the screen. If I give a height to .outer.. then it shows up. But it doesn't have to be this way.. I can't predict the height of the page. Why doesnt the background colour of the div outer not show up on the browser? </p>