Here is the HTML code snippet:
<div id='id1'>
<div id='id2'>
</div>
</div>
And now the CSS code snippet:
#id1 {
width: 300px;
height: 200px;
margin: 0 auto;
background: red;
position: relative;
}
#id2 {
position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto;
width: 100%; top: 20px; background: green; height: 30px;
}
The challenge is to make sure #id2 takes up the full width of the screen without going beyond it. Using left: -Npx and right: -Npx might not work for all screen sizes. Any suggestions on achieving this without specifying a fixed left value?
id2 should not exceed the boundaries of the screen, so setting left: -9999px is not an option.
Check out the fiddle for a demonstration: https://jsfiddle.net/aLubmd4a/