Div flottant, dernier partiellement visible

Question

J'ai une disposition où il y aura 6 Divs flottant à gauche pour faire 6 colonnes à travers. La 6ème colonne provoquera probablement la largeur totale de ces flottants pour être plus large que la fenêtre de la plupart des utilisateurs. Est-il possible que ce 6ème soit partiellement visible (tout ce qui est plus large que la fenêtre est caché), plutôt que la 6ème colonne qui enveloppe une nouvelle ligne au-dessous des autres. Diagramme ci-dessous.

         \ 
    +----+ +----+ +----+ +----+ +----+ +--/ 
    | 1 | | 2 | | 3 | | 4 | | 5 | | 6\ 
    | | | | | | | | | | |/
    | | | | | | | | | | | \ Screen Edge 
    | | | | | | | | | | |/<--- 
    +----+ +----+ +----+ +----+ +----+ +--\ 
             /

Answer 1

Bien sûr, vous pouvez le faire avec le balisage et css suivant:

HTML

<div id="columns"> 
    <div id="wrap"> 
     <div class="col"></div> 
     <div class="col"></div> 
     <div class="col"></div> 
     <div class="col"></div> 
     <div class="col"></div> 
     <div class="col"></div>  
    </div> 
</div> 

CSS

#columns { 
    width: 600px; 
    overflow: hidden; 
} 

#wrap { 
    /* width of 6 columns and their margins */ 
    width: 660px; 
} 

.col { 
    float: left;  
    width: 100px; 

    /* visual styles only */ 
    margin: 5px; 
    height: 100px; 
    background: red; 
} 

Vous pouvez voir the result here.

La raison pour le conteneur #columns est de définir le débordement sur caché. #wrap s'assure ensuite que les flottants ne tombent pas s'ils n'ont pas assez d'espace (même avec overflow: ensemble caché, les flottants vont tomber si leur conteneur parent n'est pas assez large).

Answer 2

Placez les 6 div dans un 7ème ayant une largeur fixe.

<div class='wrapper'> 

<div class='floater'></div> 
<div class='floater'></div> 
<div class='floater'></div> 
<div class='floater'></div> 
<div class='floater'></div> 
<div class='floater'></div> 

</div> 

.wrapper{ 
    width:1200px; 
} 
.floater{ 
    width:200px; 
    float:left; 
}