Question

I have a div, it has overflow:auto and I have content that has a set width to it, (6 photos in a row) when there is no scrollbar they are fine, however when the content goes to force overflow to add a scrollbar instead of adding the scrollbar width to the width of the current div it just takes the space from the inline element space, forcing it to cut off the last photo, and have a bunch of extra whitespace where the additional space is left over. I am using min-width on the wrapper of the div with overflow auto. Is there anyway to fix this?

Answer 1

There isn’t really much you can do about this. A couple ideas:

• Use overflow:scroll to force the scroll bar to always display. That way there will be no surprises; it will be consistent.
• Compensate for the width of the (possible) scroll bar in your initial CSS. This, unfortunately, will have to be a guess. 30px or so should be plenty.

Another thing to consider is reworking your design. Page elements with overflow:auto/scroll can sometimes be useful, but I hear they can have usability problems on some touch devices, and well, scroll bars are ugly 😉