Did you know that if you snug up the contents of a div with display:inline-block; that it will not wrap floating items inside?

I'm serious! The outermost div below ends up being one hundred pixels wide! This is legit in both Chrome and IE. The div with "foo" and the div with "bar" sit side by side!

<div style="height:20px; display: inline-block;">
   <div style="height:20px; width:50px; float:right;">foo</div>
   <div style="height:20px; width:50px; float:right;">bar</div>
</div>