make <div> take only content space: disable stretching

Question

I have a <div> with some nested divs. All of them have the same height. I need parent <div> to take so much width as its content takes (I want to apply border-style property). Property display:inline (for parent) doesn't help me.

Here is markup:

   <div style="border-style:solid;height:60px;">
        <div  style="display:inline;float:left;background-color:Aqua;height:60px;width:30px;border-left-style:solid"></div>
        <div  style="display:inline;float:left;background-color:Black;height:60px;width:30px;border-left-style:solid"></div>
        ......       
   </div>

Answer 1

Using display: inline-block; seems to work:

 <div style="display:inline-block;border-style:solid;height:60px;">
        <div  style="display:inline;float:left;background-color:Aqua;height:60px;width:30px;border-left-style:solid"></div>
        <div  style="display:inline;float:left;background-color:Black;height:60px;width:30px;border-left-style:solid"></div>
   </div>

jsFiddle Demo

Some older browsers won't support inline-block, so you'll need to check it in the browsers you support.

I'm assuming these styles will make their way into a stylesheet at some point, rather than being purely inline.