473,320 Members | 1,982 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Scrollable div, left to right, inner divs

Dear all,

I am here our of desperation, having RTFM'd and hacked for hours.

What I want is simple.

I want a left to right scrollable div, containing other divs.

Eg.
<div id="outerdiv" width="400px" height="100px" style="overflow-x:scroll">

<div class="innerdiv" width="100px">bar</div>
<div class="innerdiv" width="100px">bar</div>
<div class="innerdiv" width="100px">bar</div>
<div class="innerdiv" width="100px">bar</div>
<div class="innerdiv" width="100px">bar</div>
</div>

So that I can scroll along, left to right, and view the divs within. A
bit like the Apple Store.

No matter what I try, the inner divs stack up on top of one another. I
have tried float:left and float:right. This puts them in a row, but when
the total width exceeds the width of the containing div, it creates a
new row, rather than activating the scrollbar and allowing scrolling.

I would be very grateful for some help here, or even a workaround.

Aug 27 '08 #1
2 2582
On 2008-08-27, Hugh Oxford <ar*****@fas.comwrote:
Dear all,

I am here our of desperation, having RTFM'd and hacked for hours.

What I want is simple.

I want a left to right scrollable div, containing other divs.

Eg.
<div id="outerdiv" width="400px" height="100px" style="overflow-x:scroll">
<div style="width: 10000px">
>
<div class="innerdiv" width="100px">bar</div>
<div class="innerdiv" width="100px">bar</div>
<div class="innerdiv" width="100px">bar</div>
<div class="innerdiv" width="100px">bar</div>
<div class="innerdiv" width="100px">bar</div>
</div>
></div>
You can put another div in as indicated above. Then float: left the
innerdivs.

Don't use width="400px" on a div. It's all wrong even if it might work.
"width: 400px" should go in the styles, like this for example:

<div id="outerdiv" style="overflow: scroll; width: 400px; height: 100px">

Overflow-x is CSS3. Current browsers are CSS2.1 plus a few bits.
Overflow-x works in most of them but you don't need it.
So that I can scroll along, left to right, and view the divs within. A
bit like the Apple Store.
Aug 27 '08 #2
Ben C wrote:
Ben,

Thank you SO MUCH for this. You have no idea.
Aug 28 '08 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: jake | last post by:
Maybe some kind person can help with a suggestion or two ;-) I want to construct a banner on a number of pages in the format: LHS: Text (variable content) RHS. Logo ..... each with a...
2
by: Christopher Benson-Manica | last post by:
I have a page up at http://ataru.gomen.org/test.html with the following style: body { margin: 0px; padding: 0px; height: 100%; width: 100%; } div.left { position: fixed; left: 0px; top:...
0
by: bugbear | last post by:
I was struggling with some elaborate nested divs, and my styles were working fine on everything (even Mac/ie5.2) *except* IE6.0 on Windows 2000 professional. I have 2 nested DIVS, both...
3
by: Sjef Janssen | last post by:
Is it possible to have a box (div) which sets a background-color and which contains (on the same line) text which is left aligned and text which is right aligned. (as in a table: two td's left one...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.