Scrollable DIV containing aligned DIVs

[alfredbot9000]

I'm kind of new to css, but I was wondering if its possible to create a scrollable (left to right overflow) DIV area that has multiple DIVs aligned next to each other.

i have the css to make the DIVS align next to each other, but when i place them inside of a larger div once full it goes to the next line and i want them to continue to overflow to create a horizontal scroll area.

here is my css to make the DIVs align left to right:

.video_207 {
float: left;
width: 207px;
margin-top: 0px;
margin-right: 3px;
margin-bottom: 3px;
margin-left: 0px;
position: relative;
left: 0px;
top: 0px;
background-color: #f7f7f7;
height: 200px;

is there a way to keep them aligning next to each other and create a horizontal scroll area instead of them starting a new line and a vertical scroll area?

thanks.

[Setek]

As far as I know, you can approach this in two ways, one of which may not work (I'm thinking about this theoretically here.)

1.

overflow-x

Set the width of the parent container, and set the

overflow-x

to auto. Set

overflow-y

to hidden. This definitely won't work in... Opera and Safari (I think? I'm pretty sure they don't support

overflow-x

and

overflow-y

) but it should work in the majors (IE 6, 7 and Firefox.)

If it doesn't, you may have to:

2.

div

in a

div

Like Babushka dolls, try having a fixed height

div

with the width set to the sum of all your floated videos. Then, a

div

surrounding that one with a fixed width, and

overflow: auto;

-- it should work in all the modern browsers.

Give it a go and let us know whether something works :)

Oh and Welcome to Webmaster World!

[Marshall]

alfredbot9000. Also welcome to WebmasterWorld.

I have done something similar to this before. Basically you are looking at one <div> to contain the scrolling <div> which contains the individual <div>. Your css would look something like this:

#frame {
height: 200px /* just an arbitrary number */
width: 400px;
overflow: auto;
}
#holder {
height: 200px;
width: 100%; /* or do not indicate width */
}
.innerDiv {
height: 200px;
width: 200px; /* just an arbitrary number but you would need to assign a width */
float left;
}

Your HTML

<div id="frame">
<div id="holder">
<div class="innerDiv"></div><div class="innerDiv"></div><div class="innerDiv"></div><div class="innerDiv"></div><div class="innerDiv"></div> <!-- and so on -->
</div>
</div>

This should work.

Marshall

[alfredbot9000]

Thank you both. I am glad to have found such a great resource. I used the babuska doll method which you both described and it worked. I had to set a width for the holder div which contained all the floating divs and it worked.

thanks for the help.

Alfred