1

I'm trying to create a horizontal scrolling bar which when overflowed will scroll horizontally at the top of the page. I have tried different combinations of this with overflow values but the inline-div elements that I have in the div with the horizontal settings just creates a line break meaning that the horizontal bar is pointless. This is my code:

CSS:

#files_scroll {
    width: 100%;
    height: 120px;
    background-color: #FFFFFF;
    overflow-x: scroll;
    overflow-y: hidden;
}

.file_icon {
    height: 80px;
    margin: 7px;
    padding-left: 10px;
    display: inline-block;
    padding: 5px;
    float: left;
    background-color: #CCCCCC;
    opacity: 0.5;
    border-radius: 10px;
    width: 90px;
}


<div id="main_content">
            <div id="files_scroll">
               <a class="file_icon">1</a>
               <a class="file_icon">2</a>
               <a class="file_icon">3</a>
               <a class="file_icon">4</a>
               <a class="file_icon">5</a>
               <a class="file_icon">6</a>
               <a class="file_icon">7</a>
            </div>
</div>
Aiden Ryan
  • 845
  • 2
  • 11
  • 15

1 Answers1

1

If you want horizontal scrolling, you need your content to become larger than the container. It is not possible with floating element or inline element : They fall on the "next line" when there is not enough space left.

2 solutions :

Put your content in an extra-large element.

<div id="files_scroll">
    <div id="file_container">
       <a class="file_icon">1</a>
       <a class="file_icon">2</a>
       [...]

with CSS: 

#file_container {
    width:200%; /*or a javascript calculated value... */
}

Use non-floating/non-inline element.

It is easier but... it use a single row table. There are probably alternatives, but I can't see one right now.

I didn't touch your CSS at all and this works : 

<div id="main_content">
    <div id="files_scroll">
        <table><tr>
           <td><a class="file_icon">1</a></td>
           <td><a class="file_icon">2</a></td>
           <td><a class="file_icon">3</a></td>
           <td><a class="file_icon">4</a></td>
           <td><a class="file_icon">5</a></td>
           <td><a class="file_icon">6</a></td>
           <td><a class="file_icon">7</a></td>
           <td><a class="file_icon">8</a></td>
           <td><a class="file_icon">9</a></td>
           <td><a class="file_icon">10</a></td>
           <td><a class="file_icon">11</a></td>
           <td><a class="file_icon">12</a></td>
           <td><a class="file_icon">13</a></td>
           <td><a class="file_icon">14</a></td>
           <td><a class="file_icon">15</a></td>
           <td><a class="file_icon">16</a></td>
           <td><a class="file_icon">17</a></td>
           <td><a class="file_icon">18</a></td>
           <td><a class="file_icon">19</a></td>
           <td><a class="file_icon">20</a></td>
           <td><a class="file_icon">21</a></td>
        </tr></table>
    </div>
</div>
Kraz
  • 6,910
  • 6
  • 42
  • 70
  • This is a problem, as it is an application which has a 100& height and width specification, but when I use either method it expands the page and creates a scroll bar of which can't be accepted. – Aiden Ryan Aug 01 '11 at 15:57
  • In which browser? Do you have a [live demo](http://jsfiddle.net/7qG7U/) or something? I'm not sure I understand the problem. Would you prefer a [page-scroll](http://jsfiddle.net/7qG7U/1/) instead? – Kraz Aug 01 '11 at 16:36
  • You should use `display: inline-block;` instead of using a table - it'd be more semantic. – Nightfirecat Aug 01 '11 at 16:50
  • @Nightfirecat : I know, but [inline-block won't expand the container](http://jsfiddle.net/7qG7U/2/). The way to make them work is to use my [solution #1](http://jsfiddle.net/7qG7U/3/). Which require careful calculation/javascript adjustement of the extra-large element, unless there's something I'm not aware of. – Kraz Aug 01 '11 at 18:03