Horizontal scroller in CSS

Question

I have been trying to add a scroller to my context section that will only allow the box to scroll horizontally within the visible of the viewer's screen, not vertical.

Does anyone know any code to have scrollable content in a div in a fluid css layout design?

Also, here is a link to a website that has the exact scroll effect I am trying to recreate: http://patrickhoelck.com/home.html

Answer 1

You probably want to take a look at overflow-x: scroll, which, along with setting a fixed size on the parent, will force a horizontal scrollbar if the content is too wide.

Some example html:

<div style="width: 50px; overflow-x: scroll">
    <p>Hello world!</p>
    <p>Here is a div with a horizontal scrollbar!</p>
</div>

Answer 2

Does anyone know any code to have scrollable content in a div in a fluid css layout design?

'overflow: auto' will add the scroll bar when necessary.

The trick is to make sure the content inside the scrollable element exceeds the normal width of the element, instead of simply reflowing onto a new row in which case it'll never trigger a scroll bar. One way to do this is by using 'white-space: nowrap'.