DIVs clipped too early horizontally css

Posted on 2011-11-01
Last Modified: 2012-05-12
I am working on a website that pulls rows of information randomly from a database and displays them in fixed height/width tiles horizontally across the middle of the page.  I've got it almost how I want it except that I don't like how if there isn't enough room on the right side for a full tile, then it leaves a gap instead of just displaying another tile and chopping it off (which is the behaiviour I'd like).  Once I get this working then I will add a big scroll arrow on either side of the page so the user can scroll through all 30 of the tiles horizontally.

Thank you for any help you can give.
Question by:jameshuckabone
    LVL 30

    Accepted Solution

    I've seen this kind of functionality with Jquery sliders. You'll have to set your #scrollbox to an insane width(300%) then add your overflow.  The reason it breaks is because you have the width set to 100%. Which means 100% of the browser window, then it breaks to the next line
    LVL 10

    Assisted Solution

    I agree.

    I've just been using the IE developer tools on your site.  I set the width of the #Scrollbox to 300% (coincidence honestly) and ALSO set the attribute "Overflow: Hidden" to your #container

    I now get what I think you are looking for.
     What I see now...
    LVL 10

    Expert Comment

    p.s. I also reduced the height of your #scrollbox to 325px to stop your overflow appearing as a second line *below* the first.
    LVL 30

    Expert Comment

    For the entire effect to work though(at least how I think it should), you'll have to use fixed/absolute positioning for your header and footers. Then just the middle #scrollbox should scroll

    Author Closing Comment

    Thanks a lot!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Highfive Gives IT Their Time Back

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    12 Experts available now in Live!

    Get 1:1 Help Now