<pre>タグで囲まれた範囲のソースは記述された
スペース・改行などを、そのまま表示することができますが、
このブログのように左右でfloatを使ったレイアウトでは
<pre>タグ内に書かれた記述が改行されずに
長くなった時、囲まれたボックスを押し広げて
レイアウトを崩すという問題があります。

これをoverflow：scroll;で
ボックスにスクロールバーを表示させて
解決する方法がありますが
ieの場合ボックス内の記述がはみ出そうとしなくても
常にスクロールバーが表示されてしまいます。

すごく、邪魔ですよね。

それを解決するCSSが以下です。

pre {
      width: auto;
      _width:100%;
      overflow: auto;
      /*_でIEハックを行っています。どうですか？下にスクロールバーが表示されましたね。これでIEでもソースがはみ出そうとした時だけ、スクールバーが表示されます。*/
}

あとはpaddingやmarginなどを調節して
各ブラウザが同じ見栄えになるようにすれば完了です。