Floated Div's, Last Partially Visible

I have a layout where there will be 6 Divs floated left to make 6 columns across. The 6th column will likely cause the total width of these floats to be wider than the window of most users. Is it possible for this 6th to be partially visible (anything wider than the window gets hidden), rather than the 6th column wrapping to a a new line below the others. Diagram below.

                                        \
  +----+ +----+ +----+ +----+ +----+ +--/
  |  1 |开发者_运维知识库 | 2  | | 3  | | 4  | | 5  | | 6\
  |    | |    | |    | |    | |    | |  /
  |    | |    | |    | |    | |    | |  \   Screen Edge
  |    | |    | |    | |    | |    | |  /  <---
  +----+ +----+ +----+ +----+ +----+ +--\
                                        /

Sure, you can do it with the following markup and css:

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

You can see the result here.

The reason for the #columns container is to set overflow to hidden. #wrap then makes sure the floats don't drop if they don't have enough space (even with overflow: hidden set, floats will drop if their parent container isn't wide enough).

Put the 6 divs into a 7th that has a fixed width.

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