How to get horizontal scroll with 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 demonstration div will copy the code again inside the tl div. I want a horizontal scroll tl div.

How can i achieve this?

Answer 1

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

Also see the question "Stack Overflow" How do I get floating divs inside a constant width div to extend horizontally? "for more offers ...

EDIT: as stated in the comments below, Internet Explorer 6/7 will not accept an inline block for div elements, so you need to use span elements for the “demo” divs, since they are inline by default.

Answer 2

After doing some research and testing a few things, I believe that what you are trying to do cannot be achieved without an additional container, which has a fixed width, since the floating elements stack according to the size of the container.

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; } 

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 the demo: http://nikc.kapsi.fi/dev/html/misc/horiz-scroll.html

Also consider a similar question asked earlier: HTML Divs, columns, horizontal scrollbar

Answer 3

If you use jQuery, I used the following to do what I think you need.

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