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?

Answer 1

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

Answer 2

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.

Answer 3

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: http://stackoverflow.com/questions/1278796/html-divs-columns-horizontal-scroll-bar

Answer 4

It works! Even on crap IE6! Damn span! I love you!