How to force wrapper div to keep its optimal width according to its children

[nawadvvo]

I have a problem here in Chrome (maybe in other browsers too). I have a wrapper div which floats to the left. It contains some child div and these divs float to the left too and they have different widths according to their contents. I defined a max-width property for the wrapper div and as you can see in the fiddle code when the wrapper reaches this max-width, the last child in the wrapper moves to the next line but the wrapper keeps the maximum width and there are a lot of empty space on the right.I'd assume the wrapper's size should be recalculated and should have a smaller width because it floats.I'd like it, because in my real code the wrapper has "sexy" css but it looks rude with empty spaces.Sorry for my English, I hope you'll understand my problem. Has anyone an idea how I can resolve this problem without any JS (or just a little bit of JS)?Thanks!http://jsfiddle.net/Xd9PV/1/\[code\] <div class="wrapper"> <div class="float float-1">apple</div> <div class="float float-2">banana</div> <div class="float float-3">orange</div> <div class="float float-4">some very delicious strawberries</div> </div>? .wrapper { border: 1px solid red; float: left; max-width: 300px; } .float { border: 1px solid blue; float: left; }\[/code\]