Question

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
  |    | |    | |    | |    | |    | |  /  <---
  +----+ +----+ +----+ +----+ +----+ +--\
                                        /

Answer 1

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).