title: margin: 0 auto does not appear to center
body: <p>I understand that this question must have been asked many times before, but I have indeed looked at the already existing answers and nothing seems to work! I have defined width on the element, tried removing float:left (this doesn't seem to center it and it also breaks my layout..), tried setting it as display:block, I did before use a footer to clear the floats and all that, tried using text-align center as well. But yeah, nothing seems to center it.</p>
  
  <pre><code>.container3col {
      width: 1200px;
      background: #FFFFFF;
      margin: 0 auto;
      display:block;
  }
  
  .leftbar {
      width: 180px;
      padding-bottom: 10px;
      background:#00FF00;
      float:left;
      }
  .content {
      padding: 10px 0;
      width: 840px;
      background:#FF0000;
      float:left;
  }
  .rightbar {
      width: 180px;
      padding: 10px 0;
      background:#00F;
      float:left;
  }
  </code></pre>
  
  <p>My HTML part does contain a lot of content currently so it might be a bit messy to post it all. Basically I created a container DIV and put the leftbar, content and rightbar DIVs inside it. I'm fairly sure all of the content fits within the width constraints of its DIV. </p>
  
  <p>One thing that may affect my code is that I did use a script to change content from display:none; to display:block (so that the user can click on a link and load the rest of an article).</p>
  
  <p>I made a two column layout before that seems to work perfectly; it centers just fine without needing to remove floats or anything like that. The display:none to block thing as I mentioned in the paragraph above is also used. The two column pages work perfectly fine.</p>
  
  <p>Thanks. </p>
  
  <p>EDIT: Here's a fiddle of it. Since lots of the content was unnecessary (i.e. articles just full of filler text), I removed some of it. <a href="http://jsfiddle.net/Snail489/W6C9v/6/" rel="nofollow">http://jsfiddle.net/Snail489/W6C9v/6/</a></p>