horizontal sliding container

[jaykapalczynski]

I am looking to place a bunch of Grids inside a container....having issues

I want an external container with a width of Auto which will fit inside a centralized container in the middle of my page.
Inside this external container I want another container that will allow the user to scroll left and right to see all the info that is inside it.  There will be more inside this container that can be viewed...SO I am looking how to make a horizontal slider in this container so the users can scroll

Thoughts?
Thanks

[jaykapalczynski]

A scroll pane?  Something I need to install?  Reference?
Any examples or sites...

[TimWitt]

Jay,

Maybe this" rel="nofollow" target="_blank">http://dojotoolkit.org/reference-guide/1.9/dojox/layout/ScrollP... will help?

Check out both examples.

Tim

[jaykapalczynski]

I am tryign this but cant seem to get the grids inside the Scroll Pane....and there is no horizontal slider

http://jsfiddle.net/Jaykapalczynski/S22vX/1/

Thoughts?

[TimWitt]

Change:

orientation: "vertical",

to

orientation: "horizontal",

[jaykapalczynski]

I have horizontal but vertical scroll is still there...puzzled

http://jsfiddle.net/Jaykapalczynski/S22vX/16/

Trying to get the Grids to line up left to right and have a scroll viewer to scroll over to see them all....

[jaykapalczynski]

think I got it with this

Formatting into Tables seem to have worked for the DIV tags...

ANYONE else have an idea on how to do differently?

<h2>Declaritive (HTML) Horizontal</h2>

<div data-dojo-type="dijit/layout/ContentPane" title="Boat Ramps">

      <div data-dojo-type="dojox.layout.ScrollPane" data-dojo-props='orientation:"horizontal"' style="max-width:600px; max-height:250px; border:1px solid; overflow:hidden;">
  <table>
   <tr>
    <td><div id="gridNoColumnSets"  class="gridclass" ></div></td>
    <td><div id="gridNoColumnSets2" class="gridclass" ></div></td>
    <td><div id="gridNoColumnSets3" class="gridclass" ></div></td>
    <td><div id="gridNoColumnSets4" class="gridclass" ></div></td>
    <td><div id="gridNoColumnSets5" class="gridclass" ></div></td>
   </tr>
  </table>
 </div>
</div>

[jaykapalczynski · Accepted solution]

got both ways.....auto scroll and manual scroll

http://jsfiddle.net/Jaykapalczynski/MLtky/123/