Forcer le contenu à s'écouler horizontalement

Question

Je cherche à forcer le contenu d'une boîte qui est centrée dynamiquement verticalement à s'écouler horizontalement au lieu du flux vertical habituel qui nécessitera un défilement vers le haut ou vers le bas.

#outerbox { 
    height: 100%; 
    overflow: hidden; 
    position: relative; 
} 

/* Creating 2% margin on left & right then 3% on top and bottom */ 
#innerbox { 
    height: 94%; 
    margin: 0 2%; 
    margin-top: -47%; 
    position: absolute; 
    top: 50%; 
} 

#content { 
    height: 100%; 
    min-height: 100%; 
} 

---

<div id="outerbox"> 
    <div id="innerbox"> 
    <div id="content"> 
     Content goes here... 
    </div> 
    </div> 
</div> 

Le problème est quand je redimensionner la fenêtre du navigateur, au lieu de couler à droite et barres de défilement horizontal, le contenu se déplace vers le bas au-delà de la zone centrée. Des conseils sur ce que je fais de mal et de solution?

Answer 1

Voici un exemple de création d'une zone de défilement horizontale avec des éléments à l'intérieur:

http://jsfiddle.net/6PupD/

L'astuce est le conteneur de défilement a une largeur inférieure à celle du conteneur d'objet. Vous devrez définir la largeur du conteneur d'objets suffisamment grande pour contenir tous les éléments.

Espérons que cela aide.

Bob