title: How to center element inside of a div
body: <p>I want to center the content of <code>.SideBarFirst div</code> but don't know how to achieve this.</p>
  
  <p>Can someone help me out with an solution which is not based on adding <code>padding</code> or <code>left/right</code> values to the element?</p>
  
  <p>CSS:</p>
  
  <pre><code>body {
      width: 960px;
      margin: 0 auto;
  } 
  
  .content {
      width:500px; 
      float: left;
  }
  
  .SideBarFirst {
      width:460px; 
      float: right;
  }
  
  .SideBarFirst div {
      width: 40px;
      margin: 0 auto; 
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="content"&gt;test&lt;/div&gt;
      &lt;div class="SideBarFirst"&gt;
          &lt;div&gt;not working for center&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>My current code: <a href="http://jsfiddle.net/mmnaderi/yTCkx/" rel="nofollow">http://jsfiddle.net/mmnaderi/yTCkx/</a></p>