html - How do I resize a specific box by css -

i want resize right box whereas left box value (400px) fix how do css? when resize browser window right box comes down not right. here css , html.

#w {    max-width: 1000px;    width: 100%;    margin: 0 auto;    border: solid 1px #eee;    box-sizing: border-box;  }  #left {    max-width: 400px;    width: 100%;    border: solid 1px #000;    height: 100px;    float: left;    box-sizing: border-box;  }  #right {    max-width: 598px;    width: 100%;    border: solid 1px #000;    height: 100px;    float: left;    box-sizing: border-box;  }  .clear {    clear: both  }

<div id="w">    <div id="left"></div>    <div id="right"></div>    <div class="clear"></div>  </div>

try

.div1 {      width: 300px;      height: 100px;      border: 1px solid blue;  }    .div2 {      width: 300px;      height: 100px;      padding: 50px;      border: 1px solid red;  }    .div3 {      width: 300px;      height: 100px;      border: 1px solid blue;      box-sizing: border-box;  }    .div4 {      width: 300px;      height: 100px;      padding: 50px;      border: 1px solid red;      box-sizing: border-box;  }

<h2>without box-sizing</h2>  <div class="div1">this div smaller (width 300px , height 100px).</div>  <br>  <div class="div2">this div bigger (width 300px , height 100px).</div>    <h2>with box-sizing</h2>  <div class="div3">both divs same size now!</div>  <br>  <div class="div4">hooray!</div>