I want the child div width to be 100% of the body.

CSS

#container {
    position:relative;
    width:400px;
    height:100px;
    margin:0 auto;
    background:red;
}
#inner {
    width:100%;
    height:30px;
    background:blue;
}

HTML

<div id="container">
    <div id="inner"></div>
</div>

Here is the fiddle

I'm using position:relative for parent div and the position:absolute; solution is not working. How can I do this? Js solutions are acceptable.

Check this fiddle

CSS

body {
    margin-top:30px;
}
#container {
    width:400px;
    height:100px;
    margin:0 auto;
    background:red;
}
#inner {
    width:100%;
    height:20px;
    background:blue;
    position:absolute;
    right:0;
    left:0;
}

You just have to remove the position:relative from the container div and everything will work as expected

AND

I dont think there is a need for writing JS for this as this can be just obtained using CSS.

more