title: div doesn't display 100% width when the content width in other div is greater than 100%
body: <p>How can I make DIV width 100% (body width) with CSS? Currently, my div (.MainHeading) width is set as 100%, but it doesn't display like 100% when the content width in another div is greater than the screen size. It just displays in top-left corner.  </p>
  
  <p>I've been searching for the solution for some time but I haven't found it yet...</p>
  
  <p>This is my CSS:</p>
  
  <pre><code>body 
  {
  margin:0;
  padding:0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  }
  
  .MainHeading
  {
  margin: 0 auto;
  background-color:Gray;
  background-repeat:repeat-x;
  height:auto;
  min-height:93px;
  width:100%;
  }
  .Body-Area
  {
  margin:0 auto;
  overflow:visible;
  width:950px;
  max-width:950px;
  height:100%;
  min-height:395px;
  }
  .Container
  {
  display:table-row;
  position:relative;
  }
  .Mid-Div
  {
  display:table-cell; 
  position:relative;  
  padding-left:2%;
  padding-right:2%;
  float:left; /*for IE 7 &amp; 9 Compatible View*/
  overflow-x:auto;/*for IE 8*/
  vertical-align:top;
  width:100%;
  max-width:950px;    
  overflow:hidden;
  }
  </code></pre>
  
  <p>And here is my HTML code:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;body&gt;
      &lt;div class="MainHeading"&gt;
      &lt;/div&gt;
      &lt;div class="Body-Area"&gt;
          &lt;div class="Container"&gt;
              &lt;div class="Mid-Div"&gt;
                   &lt;img align="bottom" width="1224" vspace="1" lang="en"  hspace="1" height="332" border="1" src="images/cover2.png" alt="Test" id="imgtest" dir="ltr" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>