title: Center content in middle of page when inside a div over to one side
body: <p>I have a web page with a fixed 200px column on one side (contains the menu). The right side is variable width. The right side will be populated using AJAX. For the default page (when no menu item has been selected) I'm trying to get the company logo centered horizontally in the <em>page</em>, not the div into which it is placed. None of the CSS I've tried so far works as expected, with the logo moving left or right of center as the browser window is resized horizontally. Fearing the loss of my remaining hair I'm looking for suggestions.</p>
  
  <h2>Additional info</h2>
  
  <p>The CSS for the two columns (from Dreamweaver) is</p>
  
  <pre><code>.sidebar1 {
  float: left;
  width: 200px;
  padding-bottom: 10px;
  }
  .content {
  padding: 10px 0;
  width: 80%;
  float: left;
  }
  </code></pre>
  
  <p>The sidebar1 column contains the menu. The right (main) column is simply <code>&lt;div class="content"&gt;&lt;/div&gt;</code> and will receive the content from the server depending on what has been selected from the menu. This div is of course to the right of center relative to the page but I'd like to place the logo into the div but centered horizontally in the page.</p>