html - 子 div 全幅 - マージン

Question

ネストされた div のセットがあります。親 div と左右の余白よりも多くの幅を使用せずに、内側の div が全幅を取得するようにします。max-width:100% を試しましたが、今のところうまくいきません。この例#test2では、全幅にする必要があります - margin-left

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%;
}

JSフィドル

calc javascript や、 Any pointer?のような新しい CSS コマンドを使用せずに動作させたいと思います。

Answer 1

これを試して、

min-width:100px;
width:100%;

Answer 2

幅を奪う:100px; width:100%; にします。このような：

#test2{
margin-left:51px;
float:left;
width:100%;
background:blue;
height:100px;
}