テンプレートPart4：floatによるレイアウト崩れ対策

今回はブラウザの縮小によってレイアウトが大きく崩れてしまう問題を対処しました

１．　どのような症状か？
例えば、ブラウザを縮小したとき、右サイドバーのウィジェットが、下の方に移動してしまう現象です

もっと縮小していくと、投稿記事が、サイドバーの下に移動してしまい、レイアウト崩れが発生してしまいます

２．原因は？
ブログのBodyにwidthを指定していなかったことが原因のようです
また、ブログの投稿、サイドバーなどのwidthを％で指定しているのも良くなかったようです

まず、Bodyにwidthを指定していなかったため、ブログ全体の幅が決まっていない状態でした
そのような状態でwidthに％を指定している場合は、ブラウザのサイズに合わせて動的に幅を決定してしまいます

そして、ブラウザを縮小した場合は、ブラウザの幅にすべてのコンテンツが収まるようにするため、レイアウトが崩れてしまったようです

３．対策は？
bodyに全体のサイズを指定します（当ブログ1500px）

そのあと、サイドバー、メインコンテンツの幅も、%を使わずに記述し、全体の幅がbodyの幅を超えないように設定します

そうすれば、ブラウザの縮小時にレイアウトを崩すことなく、スクロールバーで対処できるようになります