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

Wrap your PRE in a DIV with some additional margins.

Answer 2

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 3

Wrap your PRE in a DIV and apply the overflow: scroll; to the DIV. Make sure you use either <div style="overflow: scroll; width='...'; height='...';"> or assign a class to the div to make sure not all of them get a scrollbar.

For example, in my blog, I use <div style="overflow: scroll; width: 100%;"> for small pieces of code so people can scroll horizontally and the div will grow to the correct height. For longer pieces, I also assign a height to reduce the length of the whole article; people can then scroll vertically, too.

You can also try <div style="overflow: scroll; overflow-y: hidden; width: 100%;"> to get only a horizontal scrollbar (and not both and one of them is disabled). Maybe <div style="overflow-x: scroll; width: 100%;"> works, too.

Answer 4

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