Positionnement absolu sans remplissage de contenu

Question

J'éprouve un problème css méchant que je n'arrive pas à résoudre. Je souhaite positionner un wrapper à l'intérieur d'un conteneur avec la propriété left (dans le sens positif, le négatif semble fonctionner pour une raison quelconque) sans le contenu à l'intérieur pour commencer l'encapsulation. Voici un jsfiddle pour le code HTML et CSS suivant.

<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; 
} 

Si vous décommentez left: 100px;, vous remarquerez les deux boîtes sont déplacées mais aussi enveloppé. En chrome, cela peut être fixé en utilisant white-space: nowrap; sur le conteneur. Cependant, cela ne fonctionne pas pour Firefox et affecte également le contenu du texte. J'ai essayé de retirer position: relative; du conteneur et de calculer le décalage correct avec Javascript, mais c'est un peu gênant.

Editer: Il fonctionne avec les transform: translateX(100px) de CSS3 mais je préférerais toujours la variante left.

Answer 1

La spécification d'une largeur pour l'encapsuleur semble fonctionner dans Firefox et Chrome (et ne nécessite pas la propriété white-space). Le CSS pour wrapper devient:

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