Grow your CSS skills. Land your dream job.

Horizontal Scroll

  • # September 7, 2011 at 8:08 am

    I have a row of DIV’s which I am floating left to make them display inline.

    What I’d like to do is to get them to flow outside of their container to the right and then with overflow get a horizontal scrollbar.

    At the moment the div’s wrap as they get to the end of the containing div.

    < !DOCTYPE html>


    It all goes here

    It all goes here

    It all goes here

    It all goes here
    It all goes here


    # September 7, 2011 at 9:22 am

    Please put this in a JSFiddle or provide a link as it’s really hard to understand what you are trying to achieve.

    If you want divs to flow outside of a container then why on earth are you putting them in a container?

    # September 7, 2011 at 9:55 am

    @lyleyboy

    use
    http://jsfiddle.net/

    do you aim for such result ?

    http://jsfiddle.net/krysak4ever/pbpZz/5/

    # September 7, 2011 at 11:47 am

    I think I can visualise what you’re after but it’s not going to work the way you think it will with pure CSS based on the markup you have.

    I suspect you’re really going to need some sort of ‘Slider’ which will rely on javascript.

    Of course, someone better than me will now come along and prove me completely wrong.

    EDIT: I was encouraged by ‘overflow-style’ but then found out no-one supports it yet.

    : http://www.w3schools.com/cssref/css3_pr_overflow-style.asp

    # September 7, 2011 at 1:25 pm

    To position the div’s to the left and so the content will have a scroll you would just need have only overflow turned on for x. e.g overflow-y:hidden; then also make sure the content div is big enough to fit the paragraphs or content inside it. So if you have four paragraphs that have a width of 200px each you would need a box of 808px (assuming you have the borders. Check out the jsfiddle to see. Is this what you were looking for?

    http://jsfiddle.net/ZnpZH/2/

    # September 7, 2011 at 1:47 pm

    @Adman If the content box is wide enough for all the divs inside it then the scroll won’t do anything. If the container isn’t wide enough then the the floats will step down

    I think he’s after a set of say 5+ divs with only the middle 4 showing but being able to scroll left & right to see the others….but I don’t think you can do that with CSS.

    Of course, I could be wrong.

    # September 7, 2011 at 3:32 pm

    @Paulie_D oops you are correct. my browser was cutting off some so it was allowing it to scroll.

    # September 7, 2011 at 10:50 pm

    @lyleyboy

    Semantically, why not put it as a list? It works with css if you use an unordered list.

    http://jsfiddle.net/ZnpZH/4/

    # September 8, 2011 at 5:23 am

    @Adman That’s a nice solution but I have the feeling that he’s going to want to put a lot of content in the divs which might not work in a list format.

    Although, of course, I THINK under HTML5 you can put divs in a list…but I may be mis-remembering that.

    # September 8, 2011 at 8:00 am

    @Paulie_D, you can put divs in a list-item under html4.
    @lyleboy, you’d need to know the total width of all the floats and give that width (or wider) to their parent and then scroll the overflow on its parent, like this (not tested):




    Heading


    Here is some content




    Heading


    Here is some content




    Heading


    Here is some content




    Heading


    Here is some content




    Heading


    Here is some content





    #containment {
    width: 800px;
    height: 400px;
    overflow-x: scroll;
    }

    #scroller {
    width: 3010px;
    height: 380px;
    }

    .slidepart {
    width: 600px;
    height: 300px;
    padding: 30px 0;
    border: 1px solid #000;
    float: left;
    }
Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".