title: Aligning DIV without margin or float
body: <p>I a template, I have five DIV elements underneath each other on a HTML page. (Logo, top menu, sub menu, content, footer).</p>
  
  <p>I want the user to be able to set the alignment for each DIV in a CMS: left, center, right.
  Those settings I used to translate to</p>
  
  <pre><code>margin-left: auto; margin-right: 0px; // right
  margin-right: auto; margin-left: 0px; //left 
  margin-left: auto; margin-right: auto; // center
  </code></pre>
  
  <p>for each DIV. Now however, I want the user to be able to specify a real <strong>margin for each side</strong> as well. That, of course, makes the <code>margin</code> attribute <strong>unusable for positioning</strong>.</p>
  
  <p>I do <strong>not</strong> want to use <strong>float</strong> for the positioning as this will bring additional layout troubles. I would have to surround the DIVs with <code>overflow: auto</code> wrappers and so on. </p>
  
  <p>My current idea is to have <strong>two nested DIVs</strong>. The outer one takes care of the positioning (margin:auto), while the inner one sets the user-specified margins.</p>
  
  <p>I fear however that this will bring me additional woes when variable widths come into play, or inner padding. </p>
  
  <p><strong>Is there a simpler way than that to align a block element left, right, or center?</strong></p>
  
  <p>IE7 used to listen to <code>&lt;div align=center&gt;</code> and center block elements surrounded by it. Something like that (but valid and cross-browser) would be exactly what I'm looking for.</p>