中央寄せレイアウトで、スクロールバーの有無によって横にずれてしまうのを解決

FireFox、Opera、Safariは、センタリングなレイアウトの時、ページの内容量によって横位置が動く罠？があります。

• ページ内容の高さが、ブラウザのウインドウの描画領域におさまる
  • 縦スクロールバーが表示されない
  • ブラウザのウインドウの描画領域でセンタリング
• ページ内容の高さが、ブラウザのウインドウの描画領域におさまらない
  • 縦スクロールバーが表示される
  • ブラウザのウインドウの描画領域から縦スクロールバーの幅分を除いた領域でセンタリング

以上の、前者と後者で横位置が変わります。

そこで、IEのように常に縦スクロールバーを表示させる解決方法があったのでピックアップ。

• Firefoxのスクロールバーの有無でセンタリング位置がズレる件を解消 - CSS HappyLife
  • htmlにoverflow-y:scroll;を適用。Operaは非対応。
• 502 Bad Gateway
  • htmlにheight:100%;とmargin-bottom:1px;を適用。
• HTML5ホームページテンプレート無料配布 [Cool Web Window]
  • なぜhtmlに適用するかもこちらで納得。
• [CSS]スタイルの初期化(前編) -全称セレクタとhtml, body編 | コリス
  • overflow-yではなくoverflow:-moz-scrollbars-vertical;を。

で、どの方法を使わせてもらうかは好みだと思うのですが
私は個人的に無意味に動くスクロールバーは好きではないのと
overflow-y:scroll;ではSafari3にも対応していたのでこちらを使わせていただきました！

ソース

html{
	overflow-y:scroll;
	}