SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    #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;
    position:relative;
    }
    .inner{float:left;margin-right:-999em;}
    Code:
    <div id="product-container">
             <div class="inner">
                    <div class="product-item">
    
    etc..

  3. #3
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Amazing, thanks Paul,

    Works perfectly!

    Thanks again
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  4. #4
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Try adding position:relative here:

    Code:
    .product-item{float:left;height:340px;width:181px;position:relative;}

  6. #6
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome!

    Thanks
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •