CSS: Выровнять N разделов по горизонтали в обертке

Question

Как можно достичь выравнивания N смежных divs по горизонтали с помощью обертки, width - это «авто»?

как:

.boxes{ width:200px;height:200px;float:left; } 

<div id="wrapper" style="width:auto;"> 
    <div class="boxes"></div> 
    <div class="boxes"></div> 
    <div class="boxes"></div> 
    . . . 
</div> 

Я попытался применения display:inline; и display:inline-block; на обертке, но коробки переходит в новый год после того, как он достигнет браузеров/ширину экрана?

Но установка ширины документа в фиксированном состоянии решит проблему, но ее не то, что я хочу.

Также я могу легко достичь этого, используя tables, но я не хочу этого делать, потому что мой код будет выглядеть грязным и будет трудно поддерживать.

Answer 1

Добавить

#wrapper 
{ 
    white-space: nowrap; 
} 

и на классе коробки: изменить float:left к display:inline-block;

FIDDLE

Это будет держать ваши коробки из упаковки.