Mam następujący html:

<div class="main_container">
    <div class="sub_container">
        <div class="floating">wookie1</div>
        ...
        <div class="floating">wookie5</div>
    </div>
</div>

Rozważ to jak galeria zdjęć.

main_container ma niezmieniony rozmiar, jest ustawiony jako procent rozdzielczości użytkownika. Chcę, aby sub_container miał dokładną szerokość sumy pływającego div.

Jeśli używam „display: table”, dla sub_container i „display: inline-block;” dla pływających div działa dobrze:

dopóki nie mam wystarczającej liczby div na liście, tak aby suma szerokości była większa niż main_container i łamały się w następnej linii:

Ale mimo to chcę, aby podkontener (żółte tło) ZAWSZE był DOKŁADNĄ SZEROKOŚCIą sumy div, nawet jeśli są one w kilku wierszach, jak poniżej:

Sprawdzałem już od wielu godzin i nie byłem w stanie znaleźć eleganckiego rozwiązania (tylko css, jeśli to możliwe).

Tutaj jestjsfiddle, aby się tym bawić.