Question

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/

    <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;
    }

Answer 1

Add a clear:both to the last div element like this:

.float {
    border: 1px solid blue;
    float: left;
    margin-right: 5px;
}
.float:last-child {

    clear:both;
}

Works for me.