DIVs clipped too early horizontally css

Posted on 2011-11-01
Medium Priority
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
  • 2
  • 2
LVL 30

Accepted Solution

LZ1 earned 1000 total points
ID: 37062583
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

CSIPComputing earned 1000 total points
ID: 37062636
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

ID: 37062649
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

ID: 37062658
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

ID: 37065005
Thanks a lot!

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses
Course of the Month16 days, 23 hours left to enroll

864 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