title: Background repeat only on one side of the site layout, content centered?
body: <p>How can I repeat endlessly a background color/image only on one side of my site layout and keep the content centered?</p>
  
  <p>The best method seems to be with tables as it will work even in IE6, however is there a method to do this without tables and javascript and be working in at least IE7+?</p>
  
  <p>The method with divs/display:table does not work in IE at all,</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
  *{
  margin:0;
  padding:0;
  }
  
  /* table method */
  
  .table-container{
  margin-top:20px;
  border:0;
  border-collapse:collapse;
  width:100%;
  height:100px;
  }
  
  .table-container .left{
  background:transparent;
  }
  
  .table-container .center{
  width:960px;
  background:#ddd;
  vertical-align:top;
  }
  
  .table-container .center div{
  margin:0 auto;
  width:960px;
  }
  
  .table-container .right{
  width:auto;
  background:#ccc;
  }
  
  /* div method */
  
  .div-container{
  display:table;
  margin-top:20px;
  border:0;
  width:100%;
  height:100px;
  }
  
  .div-container .left{
  display:table-cell;
  background:transparent;
  }
  
  .div-container .center{
  display:table-cell;
  width:960px;
  margin:0 auto;
  background:#ddd;
  vertical-align:top;
  }
  
  .div-container .right{
  display:table-cell;
  width:auto;
  background:#ccc;
  }
  
  &lt;/style&gt;
  
  
  &lt;table class="table-container"&gt;
  &lt;tr&gt;
  &lt;td class="left"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;td class="center"&gt;&lt;div&gt;Table method : This space must be centered&lt;/div&gt;&lt;/td&gt;
  &lt;td class="right"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;div class="div-container"&gt;
  &lt;div class="left"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div class="center"&gt;Div method : This space must be centered&lt;/div&gt;
  &lt;div class="right"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>