内联块浮动元素布局混淆窗口调整大小

Question

我有2个50％的div，里面有2个按钮。每个按钮需要左右对齐。问题是，如果我应用浮动，布局会在窗口调整大小时变得疯狂。没有浮动元素很好地包裹，但两个按钮只对齐左边。

这是jsfiddle：http://jsfiddle.net/dominicm/pcYhL/15/

如何在保持漂亮的调整大小布局的同时左右对齐一个按钮和另一个按钮？

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