Center a child to the screen width, not the parent

Question

There is a narrow DIV which contains a much wider DIV. How do I center the child DIV horizontally within the browser window (and not the parent DIV) such that the left and right margins are equal?

<div id="narrow_container" style="float:left;">
     <div id="wide_contents">
     </div>
</div>

Answer 1

Possible CSS:

<style>
#narrow_container {display: block; 
   width: 600px; 
   margin: 0 auto;
} /* narrow div, this can be anything except position: relative */
#wide_contents {position: absolute;  
   width:400px;
   margin-left:-200px; 
   left:50%; 
} /* screen-centered div */
</style>

You're basically then just positioning the element absolutely relative to the window, since absolute positioning positions relative to the closest parent with position: relative. If you don't have any parents with position: relative, it will default to the document body.

The technique for centering is reasonably common and makes use of a negative margin that is as wide as half of element's width, and then positions the element 50% from the left. This results in a horizontally centered element.