title: centering div with css but not moving over sidebar
body: <p>I want to center a div in the middle of the browser, but I dont want the centered div to go over my sidebar (over the red sidebar).</p>
  
  <p>I am using absolute position for both of the <code>&lt;div&gt;</code>'s. I was trying with relative and floating but no results. </p>
  
  <p><strong>update:</strong></p>
  
  <p>Sorry for not explaining well, but my question was, if I re-size the browser and make it so small the centered content goes over the sidebar. </p>
  
  <p>I want the centered content to go to center but I dont want to overlap with the sidebar when the browser width is small. </p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="sidebar"&gt; sidebar stuff &lt;/div&gt;
     &lt;div id="distance"&gt;&lt;/div&gt;
     &lt;div id="content"&gt;
        &lt;!-- absolutely centered content --&gt;
     &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;style type="text/css"&gt;
   html, body {
      height: 100%;         
  }
  body {
      text-align: center;   
      padding: 0;           
      margin: 0;          
  }
  #sidebar {
      position:absolute;
      top:0;
  }
  #distance { 
      margin-bottom: -10em; 
      background: red;     
      width: 1px;          
      height: 50%;          
      float: left;         
  
  }
  #content {
      position: relative;   
      text-align: left;     
      height: 20em;         
      width: 40em;          
      background: blue;     
      margin: 0 auto;       
      clear: left;         
  }
    &lt;/style&gt;
  </code></pre>