Collapsing whitespace automatically - css

Question

I have a really simple example which I've written on JSBin. It looks like this:
All I'd like to do is simply take two divs of a given width and height and display them side-by-side without a gap between them. I've used display: inline-block to accomplish the above, but it seems like it refuses to chomp the whitespace between divs, which seems to completely violate the idea of the separation of content and styling.
Here's my HTML:
<div class="container">
<div class="a">
<!-- completely empty -->
</div>
<div class="b">
<!-- nothing at all -->
</div>
</div>
and here's my 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 I work around this to get them snug together without touching my HTML?

Answer 1

Add float:left to both of the divs classes .a and .b
I upated your JSBin http://jsbin.com/iwihox/4/edit

Answer 2

You're using a tabular design. Go for broke!
.container {
display: table-row;
}
.container > * {
display: table-cell;
}
Edit: Firefox did not like the inline-block children.

Answer 3

QUICK FIX
All given answers are good solutions, however the main reason for the gap is that there is white-space characters in your actual HTML that gets rendered. If you remove the space between both divs:
..</div><div>..
That will fix your current problem.
Heres the JSBIN: http://jsbin.com/iwihox/10/edit
THE PROPER SOLUTION:
The proper way to do this, is add float:left to both classes .a and .b. Making them float does change the box-model, so depending on your surrounding markup, you will need to add clear:both to the next tag in your HTML to have the document properly flowing.
CHECK THIS FIDDLE: http://jsbin.com/iwihox/19/edit
Let me know, Thanks!