本来表示されているはずの位置から要素がズレていたり、画像が画面の外にはみ出していたり、ページがガタガタになっていたりするサイトがたまにあります。いわゆるレイアウト崩れです。本来見せたいコンテンツが画面に表示されないようなことも起こり得ます。

最近はレスポンシブデザインのサイトも一般化しており、要素が多く並んでいるようなところで崩れを起こしているサイトもたまにあります。個人サイトであればまだしも、企業サイトでこれが起きてしまっていると大ダメージです。情報としての信用はもとより企業としてのイメージにも影響することは否めません。

幅の指定値が間違っているという単純な設計ミスが原因の一つとして考えられます。
以下のような場合です。
＜コンテンツ全体幅＞1000px
＜コンテンツ左側幅＞300px
＜コンテンツ右側幅＞750px
全体が1000pxであるにもかかわらず、左右にレイアウトしている中身の合計幅が1050pxでオーバーしています。入りきらないので、『300pxのボックス』の下に『750pxのボックス』が押し出されてしまいガタガタなレイアウトでページが表示されます。

ブラウザによってはある程度の値オーバーは補完して正常な表示にしてくれる場合もありますが、正確に再現する本来の処理では壊れたようなページ表示になります。古いバージョンのブラウザでは補完が弱いだけでなく、値を正しく認識出来ないバグの影響を受けて崩れたりする場合もあります。

HTMLだけでなくCSSやJavaScript、PHPにも『文字コード』の指定があります。これが意外な落とし穴で、ローカルの自分のPCのいつものブラウザでは正常に表示されていたのに本番環境へアップしたら突然ページが壊れて驚くというケースもあります。

CSSを正常に読み込めないとレイアウトの指定が全て機能しないので、崩れはもとより色などの装飾の指定も全て無効になってしまいます。本番環境でレイアウト崩れを起こしている場合、もしブラウザでCSSのソースを表示して文字化けしてしまっていたらデータの一番上に『charset～』という記述をしているかチェックしてみると良いでしょう。文字コードが適切に指定されておらず、文字化けが発生すると思わぬ記号類になってしまう文字もあり、以後の記述がコメント化されてしまったり、記述の区切りが正しく認識されないことが崩れの原因になっている可能性があります。