Collapsing Content in Fluid, Responsive Design

Question

I have a responsive design, which I'm relatively new to, that has a series of fluid images in the primary content area. Below 800px this content area has a large image, that spans its full width, followed by columns of 2 images after that:

body.our_work #work ul {
    list-style: none;
    margin: 0%;
    padding: 0%; }

    body.our_work #work ul li {
        float: left;
        margin: 0% 1.075268817204% 1.075268817204% 0%; /* 10/930 */
        position: relative; }

        body.our_work #work ul li.small {
            width: 49.462365591398%; /* 460/930 */ }

            body.our_work #work > ul > li:nth-child(odd) {
                margin-right: 0%; }

At and above 800px, the content area turns into a first row of one large image and one small image, followed by rows of 3 images across:

@media screen and (min-width: 800px) { 

    /* Convert to 3 Columns */
    body.our_work #work ul li { 
        margin: 0% 1.075268817204% 1.075268817204% 0%; /* 10/930 */ }

        body.our_work #work > ul > li:nth-child(odd) {
            margin-right: 1.075268817204%; }

        body.our_work #work ul li.large {
            width: 66.129032258065%; /* 615/930 */ }

        body.our_work #work ul li.small {
            width: 32.616487455197%; /* 303.3333333333333/930 */ }

        body.our_work #work ul li.large + li.small {
            margin-right: 0% !important;
            width: 32.795698924731%; /* 305/930 */ }

        body.our_work #work > ul > li:nth-child(5) {
            margin-right: 0% !important; }
}

For some reason, about 20-30% of the time this content area will "collapse" such that it and the containing images are only a portion of the full width of this column. The structure (ie 1 large and 1 small image in row one and 3 images in all subsequent) is correct, however.

I think this has something to do with the fact that when the browser's painting the page it doesn't know how large the content area is because the images are fluid.

To complicate things, inspecting the HTML in Chrome or Safari or just clicking the content often causes the content area to expand to its expected size. So... it's a little hard to see what's exactly happening. Further, resizing the window, sometimes even just a little bit, corrects the sizing.

Note that I don't encounter the issue on iPhone, iPad, or Kindle Fire.

Any help is greatly appreciated.

jsFiddle: http://jsfiddle.net/p8n9W/

Update 1:
- I can't seem to repeat in Firefox.
- The layout is a fixed sidebar with a fluid second column.
- When the issue does occur, the width of the content area seems to end up being the width of the heading "Our Work".

Answer 1

Turns out the issue was that the fluid column in a 1 column fixed 1 column fluid layout can't be floated. Floating it left caused the column to collapse when certain content was contained within.