push divs passé page edge

Question

Je suis en train de construire un en-tête pour un site Web qui inclut des lignes d'horizon de différentes villes. Pour faciliter la modification des villes affichées, j'ai créé un div unique pour chaque ville, que je peux simplement placer dans l'en-tête. Je définis l'image d'arrière-plan pour chaque div, puis je les positionne les uns après les autres, comme ceci.

<header> 
    <div class='skyline'> 
    <div id='la'></div> 
    <div id='seattle'></div> 
    <div id='paris'></div> 
    <div id='chicago'></div> 
    <div id='london'></div> 
    </div> 
</header> 

Le problème que je vais avoir est que la dernière sera supprimée de la page, en laissant un espace vide sur le bord droit. Je veux qu'ils passent au-delà du bord de l'écran, de sorte que l'utilisateur ne voit que ce qui peut tenir dans la largeur de sa fenêtre. Mon css ressemble à ceci:

.skyline { 
    background: #fff; 
    background-position: 0px 0px; 
    overflow: hidden; 
    height: 113px; 
    width: 100%; 
} 
.skyline div { 
    display: inline-block; 
    height: 113px; 
    float: left; 
    overflow: visible; 
} 
.skyline #la { 
    width: 320px; 
    background-image: url('/img/skyline/la.png'); 
} 

Tous les autres divs ont la même css, tout autre image source et la largeur.

J'ai mis ceci (modifié) sur jsfiddle pour démontrer le comportement que je reçois. Juste redimensionner la fenêtre montre ce qui se passe.

Que puis-je faire pour résoudre ce problème? Je suis prêt à changer un peu la structure html, mais s'il est possible de garder la même chose, j'apprécierais grandement cela.

Answer 1

Vous devez définir l'élément contenant à overflow: hidden; pour faire afficher pas la barre de défilement horizontal et vous devez spécifier la largeur totale du conteneur pour les divs flottaient pour qu'ils aillent tous le chemin vers la droite. Sinon, ils sont repoussés. Vous pouvez utiliser la position absolute pour contrer cela, mais je pense que cette solution est plus simple.

Vous aimez cette h ttp://jsfiddle.net/xLwML/17/

Answer 2

Essayez cette

.skyline { 
    background: #fff; 
    background-position: 0px 0px; 
    height: 113px; 
    width: 1000px; /* Changed from 100% & removed overflow */ 
}