How to get a horizontal scrollbar?

Hi,

Take a look at this page:

http://www.freemanholland.com/sidnie/boutique?ID=1

I am trying to get a horizontal scroll bar working but as you can see it doesn’t work…

Can anyone help? The 5th product has dropped down whereas it should carry on across and have the scroll bar appearing?

Thanks

Awesome! :wink:

Thanks

HI,

Just nest an inner container inside your product content div and float it and give it a negative right margin bigger than you will ever need.

e.g.


#product-container {
    background:url("http://www.freemanholland.com/sidnie/view/images/product-bg.png") no-repeat scroll 0 0 transparent;
    height:325px;
    margin:14px 0;
    overflow-y:hidden;
    overflow-x:auto;
    padding:16px 21px;
    width:766px;
    float:left;
[B]position:relative;[/B]
}
[B].inner{float:left;margin-right:-999em;}[/B]



<div id="product-container">
         [B]<div class="inner">
[/B]                <div class="product-item">

etc..

Amazing, thanks Paul,

Works perfectly!

Thanks again

Try adding position:relative here:


.product-item{float:left;height:340px;width:181px[B];position:relative;[/B]}


Hi,

Just one thing, if you take a look at this page:

http://www.sidnie.co.uk/boutique?ID=1

If you scroll across and view “Product 3” and “Product 2” at the end, the black box is not wide enough as how the first few products are?

Any ideas why this is?

Thanks