inline-block floated element layout messes up on window resize

[t0aster]

I have 2 50% divs with 2 buttons inside. each button needs to be aligned left and right. Issue is that if I apply floats the layout goes crazy on window resize. Without floats elements wrap nicely but both buttons ale aligned only to the left.Here's jsfiddle: http://jsfiddle.net/dominicm/pcYhL/15/How can I align one button left and the other right while keeping the nice resize layouts?HTML:\[code\]<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="http://stackoverflow.com/questions/14588502/Delete Selected"><input class="collapse" type="button" value="http://stackoverflow.com/questions/14588502/Collapse All"></div><div id="p"><input class="expand" name="expand" type="button" value="http://stackoverflow.com/questions/14588502/Expand All"><input class="update" type="submit" value="http://stackoverflow.com/questions/14588502/Update Selected"></div></div>\[/code\]CSS:\[code\].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;}\[/code\]