How to get horizontal scrolling with the div element?

Question

I have this div element:

    <div id="tl"  style="float:right;width: 400px; height:100px; background-color:Green; overflow-x: scroll;overflow-y: hidden;">

        <div id='demo' style="float:left;height:90px;"> dsadsad </div>
        <div id='demo' style="float:left;height:90px;"> dsadsad </div>

    </div>

The div demo will copy by the code more times inside tl div. I want to Horizontal Scrolling the tl div.

How can I achieve it?

Just as a sidenote, the value of the `id` attribute should be unique. — nikc.org, Aug 24 '09 at 11:35
@ nikc iths only for the example you can consider it for other div with float left — avnic, Aug 24 '09 at 11:37
At first glance, that markup looks like it should work. If you do overflow-x:auto; it will not show the scroll bar if they are not needed — Zoidberg, Aug 24 '09 at 11:43

score 5 · Accepted Answer · edited May 23 '17 at 10:27

5

For your "demo" divs, change float: left to display: inline-block; then it should work.

Also, see Stack Overflow question "How to get Floating DIVs inside fixed-width DIV to continue horizontally?" for more suggestions...

EDIT: as timhessel says in the comments below, Internet Explorer 6/7 won't accept inline-block for div elements so you need to use span elements for the "demo" divs instead as they are intrinsically inline by default.

edited May 23 '17 at 10:27

Community

1
1

answered Aug 24 '09 at 11:45

Paul

673
1
6
12

IE 6 and 7 don't accept inline-block for divs or other elements that have an insintric display value of block. – Stephan Muller Aug 24 '09 at 11:48
this is true, so the "demo" divs should be changed to span elements instead. – Paul Aug 24 '09 at 11:53
hi i changed it to some text it also not working as it should there is Horizontal Scrolling but i can't scroll – avnic Aug 24 '09 at 12:11
you have to change float:left to be display: inline-block; – Paul Aug 24 '09 at 12:22
as well as changing the div to be a span. It works for me in Safari. – Paul Aug 24 '09 at 12:24

score 3 · Answer 2 · edited May 23 '17 at 10:32

After doing some research, and trying out a few things, I believe what you're trying to do, cannot really be achieved without having an extra container, which has a fixed width, as floating elements stack themselves according to the size of the container.

The CSS:

    div.horiz-container {
        border: 1px solid silver;
        height: 100px;
        overflow-x: auto;
        overflow-y: hidden;
        whitespace: nowrap;
        width: 400px;
    }

    div.horiz-container div.content {
        float: left;
        display: inline;
        height: 100px;
        width: 500px;
    }

    div.horiz-container p {
        float: left;
        display: inline;
        height: 100px;
        width: 100px;
        text-align: center;
        position: relative;
    }

The HTML:

<div class="horiz-container">
    <div class="content">
        <p>Lorem</p
        <p>ipsum</p>
        <p>dolor</p>
        <p>sit</p>
        <p>amet</p>
    </div>
</div>

See live demo: http://nikc.kapsi.fi/dev/html/misc/horiz-scroll.html

Also take a look at a similar question asked before: HTML Divs, Columns, Horizontal Scroll Bar

score 0 · Answer 3 · edited Nov 18 '09 at 09:02

0

If you are using jQuery, I have been using the following to do what I think you want.

http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html

edited Nov 18 '09 at 09:02

Peter Mortensen

30,738
21
105
131

answered Aug 24 '09 at 11:32

Brian

8,418
2
25
32

hi it's not what i meant i only want the user can Horizontal Scrolling div, but thanks – avnic Aug 24 '09 at 11:35

How to get horizontal scrolling with the div element?

3 Answers3

Linked