title: CSS clearfix how to over come the inability to center an element using it
body: <p>Ok I am remastering a site for one of my clients and for years I have been doing things a little old fashion as far as CSS goes. Ive read up on some things and found the method referred to as clearfix, and I have been wanting to give it a shot since I read about it. </p>
  
  <p>Now that I am giving it a shot I am finding out my method of centering an element is not working</p>
  
  <p>typically I would center it <code>margin:0 auto;</code> but implementing the clearfix this no longer works. So now I am looking for a means of applying the same logic but keeping clearfix in the equation. I found a couple things that would work on newer browsers but not sure if they would work on older ones and I am trying to keep this as cross browser compliant as possible without hacking things to do things to do other things. Thats one of the many reasons I am remastering the site(s) I want a nice new clean code base for them from the ground up, that is compliant.</p>
  
  <p>for reference this is the method of clearfix I am using
  <a href="http://www.webtoolkit.info/css-clearfix.html" rel="nofollow">http://www.webtoolkit.info/css-clearfix.html</a></p>
  
  <p>*<strong><em>EDITED TO SHOW CODE</em>*</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
  &lt;title&gt;[title here]&lt;/title&gt;
  &lt;style type="text/css" media="all"&gt;
  *{margin:0;padding:0;}
  body{background-color:#3F3965;font-family:Verdana, Geneva, sans-serif;color:#000;}
  #content_wrap{margin:0 auto;padding:0;width:800px;background-color:#FFF;}
  #content_left{width:180px;float:left;}
  #content_right{width:620px;float:left;}
  .rounded{
    -moz-border-radius: 10px; /* Firefox */
    -webkit-border-radius: 10px; /* Safari, Chrome */
    border-radius: 10px; /* CSS3 */
    behavior: url(border-radius.htc);
  }
  .border{border:solid 2px;}
  .light{border-color:#999;}
  .dark{border-color:#666;}
  .clr{clear:both;} /*standard clear*/
  /*start clearfix*/
  .clearfix:after {content: ".";display: block;clear:both;visibility:hidden;line-height:0;height:0;}
  .clearfix {display:inline-block;}
  html[xmlns] .clearfix {display:block;}
  * html .clearfix{height:1%;}
  /*end clearfix*/
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="content_wrap" class="clearfix rounded border dark"&gt;
      &lt;div id="content_left"&gt;left&lt;/div&gt;
      &lt;div id="content_right"&gt;right&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>as previously mentioned the main containing element loses its "centered" position upon applying the clearfix class to it. The whole point of the clearfix from my understanding it to take parent elements that have floating elements within it is to have the element adjust itself to the height of the largest floating element within it. Now where this works like I believe it should the margin:0 auto; on the same element via a class provided otherwise gets ignored</p>