CSSレイアウト崩れの原因 - スペースの幅を超える画像の掲載
幅もしっかり計算して決めた、widthとpaddingも一緒に指定していない。なのに崩れてしまう！ということがあります。
この場合、メインスペースやサイドバーに掲載した写真の大きさが原因になっていることがあります。
例えば、500pxのメインスペースに520pxの画像を掲載した場合、メインスペースの幅は画像に合わせて520pxに変わってしまいます。これにより、メインスペース＋サイドバーの幅が外枠の幅を超えてしまい、崩れが生じます。
これを防ぐためには、画像はメインもしくはサイドバーの幅より小さいものだけを掲載するようにすればいいのですが、うっかり大きな画像を載せてしまったり、画像を縮小できない場合が出てきます。
そこで、メインスペースやサイドバーのセレクタに「overflow:hidden;」という指定を加えます。
これは、「溢れた部分は非表示にする」という意味ですが、これを指定することで、はみ出た部分＝500pxの幅を超えた部分が非表示になり、例え幅520pxの画像を掲載してもスペースの幅が変化することはありません。
一切画像を使用しないとか、絶対にスペースに収まる画像しかアップしないのであれば指定しなくても構わないのですが、「うっかり」や「どうしても！」といったケースが出てきますので、あらかじめそれを回避する手段をとっておくことで、後々のサイト運営が楽になってきます。