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

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.