Forcing an horizontal scrollbar on a element

The root cause of the problem turned out that to be that some lines within <pre><code> where too long, and on a browser like firefox, it was overflowing on the right, not too appealing, but not such a big deal. But on Internal explorer, it ended moving the main <div>. Ouch!

I thought the solution would just be to add an

overflow: scroll;

to the <pre> element. Hmmm, not quite. Let’s try the <code> element. Hmmm, neither! Works great with firefox though.

After much research, I found the solution on Site Surgeon and I’m grateful!

The key I was missing is to force the width to almost 100%:

width: 99.5%; /* force IE to display the scrollbars */
overflow: scroll; /* Create horizontal and vertical scrollbars. */

An other interesting nugget is to treat the <code> element as a block to be able to set a vertical margin and vertical padding.

For those of you that use Explorer, please accept my apologies. And thank you for reporting the problem!