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>
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.