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
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!