Need horizontal scrollable div

[andrewsmd]

I need a div that stays at 95% width and is scrollable horizontally. What I have inside of them is a lot of divs that are generated via code. The problem I'm having is that when they get too wide, they go to the next line. I want a horizontal scroll bar to show. Here is the html

<div id="header">

<br>

<div class="headerImageRepeat">
content here
</div>
<div class="headerImageRepeat">
content here
</div>
<div class="headerImageRepeat">
content here
</div>
<div class="headerImageRepeat">
content here
</div>
<div class="headerImageRepeat">
content here
</div>
<div class="headerImageRepeat">
content here
</div>
<div class="headerImageRepeat">
content here
</div> <!-- etc... -->
</div>

and here is my css
#header{
margin-left: auto;
margin-right: auto;
width: 95%;
text-align: left;
height: 124px;
white-space: nowrap;
overflow-x: auto;
}

.headerImageRepeat{
width: 210px;
height: 83px;
margin-right: 10px;
background-image: url('../images/userBg.png');
background-repeat: no-repeat;
float: left;
display: inline;

}

[lucy24]

Do you want a plain html scrollbar or do you need it to scroll via javascript?

Either way, it comes down to two nested divs.

The outer div has the visible width you want-- here 95%-- and a forced height based on what's going on in the inner one.

The inner div has a forced width-- presumably wider than 95%, which is why you need or want the scroll. Either ems or pixels will do. Its height can be forced, or it can be determined by its content if you have something with fixed measurements, like images.

Both divs are exactly the same height, allowing for padding and margins, so the user doesn't know there are two.

The individual pieces within the inner div are set to {display: inline-block;} so they march along nicely one after the other. That part is easy. You can practice with colored boxes or similar to get the structure right.

The javascript version has {overflow: hidden;} for the outer div, with a tiny bit of code to handle the scrolling. The plain html version has {overflow: auto;} which will give you a default scrollbar. Not all scrollbars are exactly the same, so allow a few spare pixels in the height. You don't want it to spit out a vertical scrollbar at the side. Yuk.

If you go the javascript route and you want the controls to be at the ends rather than above or below, you will need to add a third div to contain the whole package. But work out the scrolling part first.

[Paul_o_b]

You can do it quite simply by removing the float and using display:inline block instead.

This will allow the white-space:nowrap to work and the row will not wrap. No need for any extra divs at all.:)

#header {
margin: auto;
width: 95%;
text-align: left;
height: 124px;
white-space: nowrap;
overflow-x: auto;
}
.headerImageRepeat {
width: 210px;
height: 83px;
margin-right: 10px;
background:red url('../images/userBg.png') no-repeat;
display: inline-block;
}
* html .headerImageRepeat{display:inline}/* ie6 inline -block fix*/
*+html .headerImageRepeat{display:inline}/* ie7 inline -block fix*/

I would probably have used a list structure instead of multiple divs and then targeted the list element without the need for all those same classes on every element.

[andrewsmd]

Display inline-block worked. I knew there had to be a way without setting the width to do it. These things are in an asp repeater so setting a class wasn't that tough. There's always more than one way to skin a cat.