css - Collapsing whitespace automatically -

i have simple example i've written on jsbin. looks this:

all i'd take 2 divs of given width , height , display them side-by-side without gap between them. i've used display: inline-block accomplish above, seems refuses chomp whitespace between divs, seems violate idea of separation of content , styling.

here's html:

<div class="container">   <div class="a">     <!-- empty -->   </div>    <div class="b">     <!-- nothing @ -->   </div> </div> 

and here's css:

.container {   display: inline-block; }  .a {   width: 320px;   height: 240px;    display: inline-block;    background-color: #83c5d1; }  .b {   width: 180px;   height: 240px;    display: inline-block;    background-color: #b2d9d6; } 

how can work around them snug without touching html?

add float:left both of divs classes .a , .b

i upated jsbin http://jsbin.com/iwihox/4/edit