Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Thanked 0 Times in 0 Posts

    Another Horizontal scrolling question...

    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!
    Last edited by teejnits; 11-12-2010 at 12:13 AM.

  2. #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Thanked 1,874 Times in 1,858 Posts
    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/hor...ing-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...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts