How to prevent scrollbars from overlapping the content?

Question

I have a block of preformatted code (<pre>) which overflows horizontally so there is an horizontal scrollbar to allow the user to view the content.

overflow: auto;

However, in IE7 (maybe other IE versions), the scrollbar overlaps the last line of my content (which is especially irritating when there is just one line of content).

I've tried the solution listed here, but it didn't work.

The only solution that works is to use

overflow: scroll;

which adds a scrollbar to all my preformatted sections which is just awful.

Note: It works fine in Firefox 3 and Google Chrome.

---

Update

I've found a solution (see my answer), but if someone finds a way to not have the ugly padding in every preformatted section in IE7, that would be perfect.

Answer 1

Just after posting the question I thought about checking if stackoverflow handled that (which it does).

I took a look at the stylesheet and found this:

padding-bottom: 19px!ie7;

(well, they use 20px, but 19 looked better).

It adds a bottom padding only for IE7, which makes every preformatted sections without a scrollbar look a little weird because of the huge padding, but at least I can see the content (and it does look weird on stackoverflow too).

Sorry for asking a question too quickly.

Answer 2

add 'padding-bottom:20px' to the pre tag