Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
11-11-2010, 10:42 PM #1
- Join Date
- Nov 2010
- Thanked 0 Times in 0 Posts
Another Horizontal scrolling question...
Horizontal Scrolling <div>
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.
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:
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:
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).
Thank you in advance for your help!
Last edited by teejnits; 11-11-2010 at 11:13 PM.
11-12-2010, 01:07 AM #2
- Join Date
- Dec 2006
- Thanked 1,827 Times in 1,811 Posts
I've just spent a few seconds on google and found a couple interesting examples. They all seem to need a width though.
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...