Align width of container div to the sum of floating div

Answer 1

Reread your question...since you won't commit to anything (max-width:80%, 500px, etc) I broke everything on the 4th child - per your example.

CSS

.main_container, .sub_container, .floating { outline:1px solid black }
.sub_container { background-color:yellow; display:table; padding-left:5px }
.floating {
    float:left;
    padding:5px;
    margin:5px 5px 5px 0;
}
.floating:nth-child(4n+5) {
    clear:left;
    float:left;
}

HTML

    

        
wookie1
        
wookie2
        
wookie3
        
wookie4
        
wookie5
        
wookie6
        
wookie7
        
wookie8
        
wookie9
    

EDIT (option 2)
I don't believe what you're trying to do can be accomplished by HTML/CSS alone. I offer another solution based on a hunch...and your Image Gallery comment.

CSS

.main_container, .sub_container, .floating { outline:1px solid black }
.main_container {
    text-align:center
}
.sub_container { background-color:yellow; display:inline-block; max-width:80%; }
.floating {
    display:inline-block;
    padding:5px;
    margin:5px;
}

HTML

    

        
wookie1wookie1wookie1
        
wookie2
        
wookie3
        
wookie4
        
wookie5
        
wookie6wookie6
        
wookie7wookie7wookie7
        
wookie8
        
wookie9
    

It does not make .subcontainer snap to the contents; however, (using max-width) it does allow you to give it some breathing room from the main container and its children can be of various sizes.