How To Include Horizontal Scrolling On Website

The majority of webpages on the Internet use the same vertical scroll bar on the right side of the screen.  It’s normal, expected, and sometimes, well, boring.  It’s easy to switch your website to a more horizontal scrolling friendly site- it just comes down to some code changes in html and css.

*Slight warning before reading on: Horizontal scrolling is not always the ideal choice.  You will lose readers with long strands of text spanning over the screen.  Make sure it fits and makes sense with your design.

Ok, now that that’s out of the way, the first step is to set the width of the body inside the CSS file.  Instead of setting the width to a size that can fit on your screen, set the width to however many pixels wide you want your horizontal scroll to be.  For instance, I set mine to  width: 10000px

Next, it’s time to set the height.  I set mine to 100% because my individual sections of my page didn’t require a vertical scroll.  If you do have a long paragraph, for example, you may want to set your height to 1000px or so.

Finally, if you wish you have your separate sections go next to each other, enter “float:right;” into your CSS page for each section.

This should give you a nice area to work with horizontally.

Christina Ranalli

~ by christinaranalli on November 8, 2011.

%d bloggers like this: