title: Center horizontally block element which has dynamic width - CSS only cross browser
body: <p>This is an ancient topic, but I swear it is proving more difficult than it should be.</p>
  
  <p>I have created a jsfiddle to show the problem. <a href="http://jsfiddle.net/motocomdigital/VfDfw/1/" rel="nofollow noreferrer">http://jsfiddle.net/motocomdigital/VfDfw/1/</a></p>
  
  <p>I thought I cracked it, but it fails in IE 8 compatibility mode.</p>
  
  <p><br /></p>
  
  <p><strong>The Problem</strong></p>
  
  <p>I have navigation menu, in a symantic un-ordered list. The div wrapper which contains has a fixed width which is the main width of the website.</p>
  
  <p>The un-ordered list needs to float central in the wrapper. But none of the block elements in the navigation have a set width.</p>
  
  <p><a href="http://jsfiddle.net/motocomdigital/VfDfw/1/" rel="nofollow noreferrer">http://jsfiddle.net/motocomdigital/VfDfw/1/</a></p>
  
  <p>I have coloured each element a different background color so you can see each element.</p>
  
  <p>I thought I found a fix buy having half the wrapper width on <strong>div.nav</strong> as a left position, and then -50% margin-left on <strong>.nav ul</strong> - but seems to fail in IE 8 compatibility mode, see fiddle below...</p>
  
  <p><a href="http://jsfiddle.net/motocomdigital/VfDfw/2/" rel="nofollow noreferrer">http://jsfiddle.net/motocomdigital/VfDfw/2/</a></p>
  
  <p>Can anyone suggest a solution or a more efficient CSS method. It is baking my noodle.</p>
  
  <p>Thanks</p>
  
  <hr />
  
  <p><strong>Update</strong></p>
  
  <p>I thought I should update my question with why I am using each div in my fiddle example.</p>
  
  <p>See my new fiddle. <a href="http://jsfiddle.net/motocomdigital/VfDfw/4/" rel="nofollow noreferrer">http://jsfiddle.net/motocomdigital/VfDfw/3/</a></p>
  
  <p>I have now added a top position of 10px to each element so you can see the purpose of why I have used so many divs. But the only problem is that this solution is not IE 7 friendly. So I need another solution of centering block elements. I wish there was a <strong>float: center</strong> CSS rule!</p>
  
  <p><img src="https://i.stack.imgur.com/9pHJY.png" alt="enter image description here"></p>
  
  <ol>
  <li>The dark blue <strong>div</strong> is my horizon 100% width div for my navigation infinite background image.</li>
  <li>The red <strong>div</strong> is the wrapper which is the maximum width of my website. Fiddle width: 420px.</li>
  <li>The green <strong>div</strong> is the floated width of my dynamic nav, positioned left: 210px (50% of above width)</li>
  <li>The yellow <strong>ul</strong> is the floated width of my dynamic nav <strong>li</strong> elements, with negative margin of 50%</li>
  <li>The blue <strong>li</strong>'s are my anchor button containers with dividers.</li>
  </ol>
  
  <p>I hope this makes sense. But this solution nearlly worked but it's a shame it does not work IE7</p>