Is there a way to make a child DIV's width wider than the parent DIV using CSS?

css, html

Solution

Use absolute positioning

.child-div {
    position:absolute;
    left:0;
    right:0;
}

Problem

Is there a way to have a child DIV within a parent container DIV that is wider than its parent. The child DIV needs to be the same width as the browser viewport. See example below: The child DIV must stay as a child of the parent div. I know I can set arbitrary negative margins on the child div to make it wider but I can't work out how to essentially make it 100% width of the browser. I know I can do this: ``` .child-div{ margin-left: -100px; margin-right: -100px; } ``` But I need the child to be the same width as the browser which is dynamic. Update Thanks for your answers, it seems the closest answer so far is to make the child DIV `position: absolute`, and set the left and right properties to 0. The next problem I have is that the parent has `position: relative`, which means that left and right properties are still relative to the parent div and not the browser, see example here: jsfiddle.net/v2Tja/2 I can't remove the `position: relative` from the parent without screwing everything else up.

Original source