View Full Version : Another Horizontal scrolling question...

11-11-2010, 11:42 PM
I found:


from a previous thread...

The main question I have, how can I do this with mixed content. In this example (which is similar to what I've done before) the wrapper div has a defined width.

#image_box {
width: 2400px;
height: 122px;

In the case I am working with, the content is dynamic, so I can't define the width.

Is there any way to force content to start moving horizontally in a fixed height div? I've used float: left but that obviously stops once it hits the browser window's width. If not in CSS (I'm not being hopeful of a CSS solution), is there a JS trick that sets the width of the div dynamically based on the content? I know JS can calculate height dynamically based on content, but width it stops short, again, because of the browser.

So the basic structure is:

<div id="outer_div">
<div id="inner_div">
Dynamic content, imagine this is a lot that I would need a scroll bar in either direction. But of course I want it in the horizontal direction<img src="image_src.jpg" />

The basic CSS is:

#outer_div {
position: relative;
overflow: hidden;
height: 200px;
width: 960px;

#inner_div {
position: relative;
height: 200px;

So the #inner_div needs to have it's width calculated dynamically, of which it will exceed the width of the browser.

EDIT: I also need to clarify, that my scroll functionality is JS based... which is why I have the CSS as overflow: hidden. As I scroll I'll have JS tell the div to add the "left" property on the inner_div and go from 0 to -(width of inner_div - 960).

Any takers?

Thank you in advance for your help!

11-12-2010, 02:07 AM
Hello teejnits,
I've just spent a few seconds on google and found a couple interesting examples. They all seem to need a width though.
Have a look at the two sites mentioned in this article - http://paulicio.us/items/view/24/horizontal-page-scrolling-using-javascript

It could be his hscroll.js may allow you to scroll horizontal with a fluid width... I didn't check. Spend a little more time looking than I did and maybe you'll come up with a better solution...