Align width of container div to the sum of floating div

Answer 1

Use span element instead of div for "sub_container"

.sub_container{background-color:yellow;}     

Answer 2

Delete main container width and .sub_container position absolute and you should be good to go.

.main_container {
    #width:380px;
}

.sub_container {
    #position: absolute;
}

Answer 3

I got bored trying this and created a JS script based on jQuery to solve it.

var t = $(".sub_container").width()/$(".floating").outerWidth();
$(".sub_container").width(parseInt(t) * $(".floating").outerWidth());

Demo

Answer 4

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

<div class="main_container">
    <div class="sub_container">
        <div class="floating">wookie1</div>
        <div class="floating">wookie2</div>
        <div class="floating">wookie3</div>
        <div class="floating">wookie4</div>
        <div class="floating">wookie5</div>
        <div class="floating">wookie6</div>
        <div class="floating">wookie7</div>
        <div class="floating">wookie8</div>
        <div class="floating">wookie9</div>
    </div>
</div>

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

<div class="main_container">
    <div class="sub_container">
        <div class="floating">wookie1wookie1wookie1</div>
        <div class="floating">wookie2</div>
        <div class="floating">wookie3</div>
        <div class="floating">wookie4</div>
        <div class="floating">wookie5</div>
        <div class="floating">wookie6wookie6</div>
        <div class="floating">wookie7wookie7wookie7</div>
        <div class="floating">wookie8</div>
        <div class="floating">wookie9</div>
    </div>
</div>

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.

Answer 5

Pure CSS Solution

The problem is that for the items to "know" to wrap to the next line, the container has to have "filled" its available horizontal space, which is your .main_container width. Yet you want the background to not go beyond what is needed for the actual elements themselves. So I've used the elements themselves to create the background with the help of cobbled together pseudo-elements.

Here's the fiddle (tested in IE9, Firefox 18, Chrome 24 on a Win 7 machine)

What I am doing is piecing together the background with each individual .floating element, which makes the right most element to be the right border control for the size of the background (note the two different width examples in the fiddle).

The explanation of each part is given in the comments below. There are a two key limitations to note:

1. The .floating cannot have a position set, so that is a potential limitation based on particular application.
2. The background needs to be either a solid color or purely vertical oriented "motion" (i.e. a gradient fading from top to bottom, or horizontal lines would work).

KEY CSS (with explanatory comments)

.sub_container {
    border-left: 1px solid #333; /* forms its own left border */
    overflow: hidden; /* needed for background and border to work */ 
    position: relative; /* positioning background off this */
    z-index: 1; /* needs a stacking context */
}

.floating {
    font-size:20px;
    line-height:30px;
    padding:0 5px 0 5px;
    border: 1px solid black;
    margin: 3px;
    display: inline-block;
    /* NOTE: CANNOT be given positioning  */
}

.floating:after {
    content: '';
    position: absolute; /* will position off subcontainer */
    border-top: 1px solid black; /* makes the top/bottom border itself */
    border-bottom: 1px solid black;
    z-index: -1; /* push it to the background */
    top: 0; /* set it to top of sub_subcontainer */
    bottom: 0; /* set it to bottom of sub_container */
    margin-left: -100%; /* shove it past the far left edge of sub_container */
    /* next, use padding to bring it back to its position at the end
       of the text string of .floating */
    padding-left: 100%;
    /* next, add enough padding on the right to compensate for the right
       padding, right margin, and right border of .floating */
    padding-right: 9px; 
    background-color: yellow; /* set your background color */
    /* NOTE: this will not work with a background image that
       has any horizonal differences to it (top to bottom 
       gradient would probably be okay) */
}

.floating:before { /* make right border */
    content: '';
    padding-top: 10000px; /* give it some obscene height that will not be exceeded */
    margin: -5000px 0; /* counter the padding height by half size margins top/bottom */
     /* next, push this behind the background with an even lower z-index
        to hide it if it is not the right most element beign used to 
        form the right border */
    z-index: -2;
    border-right: 1px solid black; /* make the right border */
    float: right; /* get the before element to the right */
    position: relative; /* needs to be adjusted in position */
    right: -9px; /* move it same as padding-right of the after element */
    display: block; /* give it a display */
}