Абсолютное позиционирование без упаковки содержимого

Question

Я испытываю неприятную проблему с CSS, которую я не могу решить. Я хочу разместить упаковку внутри контейнера с свойством left (в положительном направлении, по-видимому, что-то не работает) без содержимого внутри, чтобы начать обертывание. Вот jsfiddle для следующих HTML и CSS.

<div id="container"> 
    <div id="wrapper"> 
     <div id="one"></div> 
     <div id="two"></div> 
    </div> 
</div> 

#container { 
    width: 200px; 
    height: 200px; 

    position: relative; 
    border: 1px solid #000; 

    /*white-space: nowrap;*//*Works for chrome, but not for firefox*/ 
} 

#wrapper { 
    position: absolute; 
    /*left: 100px;*/ 
} 

#one, #two { 
    width: 80px; 
    height: 80px; 
    background-color: #000; 

    margin: 10px; 
    float: left; 
} 

Если вы раскомментировать left: 100px;, вы заметите две коробки перемещаются , но и завернуты. В хроме это можно исправить с помощью white-space: nowrap; на контейнере. Однако он не работает для Firefox, а также влияет на текстовое содержимое. Я попытался удалить position: relative; из контейнера и вычислить правильное смещение с помощью Javascript, но это несколько неудобно.

Edit: Это делает работу с CSS3-х transform: translateX(100px), но я по-прежнему предпочитаю left вариант.

Answer 1

Задание ширины обертки, похоже, работает как в Firefox, так и в Chrome (и вообще не требует свойства white-space). CSS для wrapper будет:

#wrapper { 
    position: absolute; 
    left: 100px; 
    width: 200px; 
}