Centering an div which overflows it's parent within another centered div - css

Question

I have a single column layout where the column is a centered div with a fixed width. I want to place a wider div within the column which overflows it's parents, but center it within the parent. Conceptually something like the following:
<div style="width: 100px; margin: 0 auto; overflow:visible;" id="parent">
<div style="width: 400px; margin 0 auto;" id="child"></div>
</div>
The centering works as long as the child div is thinner than its parent, but once it gets larger, it always aligns left with the parent for some reason.

Answer 1

#wrapper {
margin: 0 auto;
width: 200px;
background-color: #eee;
position: relative;
height: 200px;
}
#child {
position: absolute;
top: 0;
left: 50%;
margin: 0 0 0 -200px;
width: 400px;
background-color: #ddd;
}
<div id="wrapper">
<div id="child">Child div</div>
</div>
jsFiddle
When an element overflows his parent, it is normal behaviour that it only overflows to the right. When you, for example, have a site that is wider then the viewport, you never have to scroll left, but only to the right. This solution is based on a absolute centered div, with a negative left margin (that value is the half of his own width). So if you know the width of this element, this solution should be fine.
Tested in FF 3.6, IE7 and IE8

Answer 2

I made a variation of Justus' solution. Instead of relative positioning, I used a negative margin of 50% in the inner element.
#wrapper {
margin: 0 auto;
padding: 10px 0 10px;
width: 200px;
background-color: #eee;
}
#child {
margin: 0 -50%;
width: 400px;
background-color: #ddd;
}
This way you don't need to know the element sizes ahead of time.

Answer 3

I am not 100% sure but try giving the parent element a position set to relative and child absolute and then set top, left and width/height properties for the child div accordingly.

Answer 4

This is how I solve it:
http://jsfiddle.net/WPuhU/1/
Also take care of the scrollbars(they do not appear if your window view is smaller then the overflowing div). Auto centers the overflowing div.
css:
#center-3 {height:40px;background-color: #999;}
#center-1 {height:20px;top:10px;background-color: #aaa;}
/* the necesary code */
body {width:100%;margin:0;}
#center-4 {
width: 100%;
overflow:hidden;
/* remove the next 2 line for a normal flow */
position: absolute;
z-index: -1;
}
#center-3 {
position: relative;
margin: 0 auto;
width: 200px;
}
#center-2, #center-1 {
position: relative;
width: 400px;
}
#center-2 {
left: 50%;
}
#center-1 {
left: -50%;
}
html:
<div id="center-4">
<div id="center-3">
<div id="center-2">
<div id="center-1"></div>
</div>
</div>
</div>
<div id="other-stuff">Here comes the other stuff above.</div>

Answer 5

#parent {
position: relative;
width: 100px;
overflow: visible;
}
#child {
width: 400px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}