CSS Horizontal scroll problem

Question

Problem

enter image description here

I need the content to force to scroll on X axis, not down the Y axis.

HTML

I know this is formatted badly but it's dynamically generated and has no white space.

<div class="folderWrapper" id="folderContainer"><div class="folderBox ui-droppable folderBoxSel" onclick="folderSelected(0)" id="fBox0"><div class="counter" id="fCount0">4</div><div class="folderName">Unsorted</div></div><div class="folderBox ui-droppable" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div><div class="folderBox" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div><div class="folderBox" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div><div class="folderBox" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div><div class="folderBox" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div></div>

Formatted nicely with one folder inner box:

<div class="folderWrapper" id="folderContainer">
    <div class="folderBox ui-droppable folderBoxSel" onclick="folderSelected(0)" id="fBox0">
        <div class="counter" id="fCount0">4</div>
        <div class="folderName">Unsorted</div>
    </div>
</div>

CSS

.folderWrapper{
    overflow-x:scroll;
    overflow-y:hidden;
    height:85px;
    white-space:nowrap;
    margin-bottom:5px;
}
.folderBox{
    float:left;
    background-image:url(../images/artworking/folder.png);
    background-position:center top;
    background-repeat:no-repeat;
    width:85px;
    height:55px;  
    position:relative;
    padding:5px;
    z-index:4;
    white-space:nowrap;
}
.folderBox:hover{
    cursor: pointer;
}

Thanks if anyone can help!

Edit

Bazzz's answer works in all browsers except IE compatability mode (unfortunatly it has to be compatible) which gives the following look:

enter image description here

With IE hack:

enter image description here

Bazzz · Accepted Answer · 2011-02-03 13:10:10Z

8

use inline-block on your folderBox instead of float:left

.folderBox{
    float: left; /* remove this line */
    display: inline-block; /* add this line */
}

whitespace: no-wrap doesn't work on floated elements, it works on inline elements.

For IE 7 I found a little hack that might help you out:

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

try this css:

.folderBox{
 display: inline-block;
 zoom: 1;
 *display: inline;
 }

Most recent edit:

This css works in IE 8 compat mode (IE7 standard):

.folderWrapper{
    overflow-x: scroll;
    overflow-y: hidden;
    height:85px;
    width: 300px; /* not really your css, I used it in my test case */
    white-space:nowrap;
}
.folderBox{
    display: inline-block;
    zoom: 1;
    *display: inline;
    background-image:url(../images/artworking/folder.png);
    background-position:center top;
    background-repeat:no-repeat;
    width:85px;
    height:55px;  
}

I believe the non-overflowing problem in IE7 lies in the position:relative that you use. I removed it, and some other css and now it works.

edited Feb 3, 2011 at 13:10

answered Feb 3, 2011 at 11:00

Bazzz

27k12 gold badges55 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Tom Gullen Over a year ago

Sorry Baz had to remove it, in IE compatability mode it's showing up really funky ill update the question to show

Bazzz Over a year ago

IE older than 8 doesn't support inline-block well. If you need it to work in IE 7 and earlier you can use your float:left but then you have to define a width for the folderWrapper so that the floating elements do not go to the next line. If the number of folders is not static then providing this width is not so easy. Alternatively you can make the folderBox a span instead of div, I'm not sure whether that will give the correct result, but it's worth a try.

Bazzz Over a year ago

also note that overflow-x and overflow-y are not well supported by IE 7 and older. I believe overflow is, but then it will likely give a horizontal as well as a vertical scrollbar.

Tom Gullen Over a year ago

Thanks, the hack -sort of works- but it's not hiding the contents horizontally, all the folders are displaying outside the scroll area. But you've given me some other things to work with, thanks. Godamn IE has wasted so much of our lives.

Bazzz Over a year ago

Hahaha, indeed I would vote for the one who abolishes IE7 (and in particular IE6) by law. Can you update your question with some new screenshots, or perhaps your current code? I feel we are close to a working solution and, am also interested in finding the answer that works on IE7.

|

sunn0 · Accepted Answer · 2011-02-03 13:24:45Z

0

I would create HTML like:

<div id="folderWrapper">
     <ul id="folderList">
         <li class="folderBox">...</li>
         <li class="folderBox">...</li>
         <li class="folderBox">...</li>
     </ul>
</div>

and CSS:

#folderWrapper {
    position:relative;
    z-index:1;
    width:300px;
    overflow:hidden;
}
#folderList {
    position:absolute;
    z-index:2;
    width:20000px;
}
.folderBox {
    float:left;
}

and then use a jquery based scrollbar inside #folderWrapper: http://www.net-kit.com/jquery-custom-scrollbar-plugins/

I like jScrollPane.

answered Feb 3, 2011 at 13:24

sunn0

3,0561 gold badge26 silver badges26 bronze badges

Collectives™ on Stack Overflow

CSS Horizontal scroll problem

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related