html - inline-block float 要素のレイアウトがウィンドウのサイズ変更で台無しになる

Question

内部に 2 つのボタンがある 2 つの 50% div があります。各ボタンは左右に揃える必要があります。問題は、フロートを適用すると、ウィンドウのサイズ変更時にレイアウトが狂ってしまうことです。floats 要素がないとうまく折り返されますが、両方のボタンは左にしか配置されません。

ここに jsfiddle があります: http://jsfiddle.net/dominicm/pcYhL/15/

素敵なサイズ変更レイアウトを維持しながら、1 つのボタンを左に配置し、もう 1 つのボタンを右に配置するにはどうすればよいですか?

HTML:

<div class="menu">
<div id="www">
<input class="delAll" type="checkbox"><label class="delLabel" for="del-all">Delete</label>
<input class="pubAll" type="checkbox"><label class="pubLabel" for="pub-all">Publish</label>
<div>
<div id="d">
<input class="delete" type="submit" value="Delete Selected">
<input class="collapse" type="button" value="Collapse All">
</div>
<div id="p">
<input class="expand" name="expand" type="button" value="Expand All">
<input class="update" type="submit" value="Update Selected">
</div>
</div>

CSS:

.menu{
    width:100%;
    height:80px;
    border-radius:7px;
    background-color:#666;
    text-align:center;
}
#www{
    width:100%;
    display:inline-block;
    background-color:yellow;
}
.delAll, .delLabel{

}
.pubAll, .pubLabel{

}

#d{
    width:50%;
    display:inline-block;
    background-color:red;
    min-width:140px;
    text-align:left;
}
#p{
    width:50%;
    display:inline-block;
    background-color:green;
    min-width:140px;
     text-align:right;
}

.delete{
    width:140px;
    margin-right:auto;
}
.update{
    margin:0;
    padding:0;
    width:140px;
}
.collapse{
    width:140px;
    float:right;
}
.expand{
    width:140px;
        float:left;
}