I'm currently working with a nested set of divs and I need the inner div to occupy the full width without extending beyond the parent div's margins. Despite trying to use max-width:100%, it hasn't been successful so far. For this particular case, #test2 should be full width minus the left margin.
HTML
<div id="test">
<div id="test2">
<div>123</div>
</div>
</div>
<div id="test3"></div>
CSS
#test{
width:100%;
height:100px;
float:left;
}
#test2{
margin-left:51px;
float:left;
width:100px;
max-width:100%;
background:blue;
height:100px;
}
#test3{
width:50px;
float:left;
background:red;
height:100px;
margin-left:-100%;
}
I would appreciate any suggestions on how to achieve this without resorting to JavaScript or introducing new CSS commands like calc. Thank you!