ページレイアウトをデザインする

下の例では各ブロックのwidth(200／400ピクセル)を超える幅(500ピクセル)の画像または表をブロックの中にいれてあります。
このようにfloatさせたブロックよりもブロックの中の内容の方が幅が広いと、ブラウザによって

• ブロックから幅の広い画像・表がはみ出す
• 回り込みが解除され、ブロックが縦に並ぶ

といった現象が生じます。
画像・表だけでなく半角英数字や<nobr></nobr>で挟まれた文字のように、改行されない文字数がwidth幅より広くなる場合も同様の現象が生じます。

この問題が起きないように、width幅を指定したブロックには、指定幅より横幅のある内容（画像や表・改行されない文字など）を中に入れないよう注意します。

左右に並んだブロックの高さ（行数）が異なると、高さの低い方のブロックと回り込み解除とのブロックとの間に隙間ができます。
ブロック別に背景色・背景画像を指定しないのであれば気にする必要はありませんが、上の例のように色や画像がある場合には隙間が目立ってしまいます。

個々のブロックに異なる背景を指定しないのであれば、下の例のように問題があるようには見えないのですが

実際には行数が少ない左ブロックが短くなっており、背景色をつけると隙間があることが分かります

行数の少ないブロックの隙間をなくすためには、短い２のブロックではなく、全体を囲うブロックの方に背景色をつけます。
下の例では、各ブロックに上と同じ背景色を指定した上で、全体を囲うブロックに内側余白（padding）と背景色（カーキ色）をつけています。

上の例から、全体を囲うブロックとレイアウトしたブロックの間の余白をなくし、背景色をオレンジに変更。さらに左ブロックの背景指定を削除するとこのようになります。

背景に色を指定する場合は短いブロックの背景色と全体を囲うブロックとの背景を同じにすれば問題はないのですが、レイアウトに壁紙を指定する場合には模様がずれたり、透明な背景の画像同士が重なってしまう可能性があるので、短いブロックには背景を指定しないようにします。

全体を囲うブロックに背景画像を指定し、短いブロックに背景を指定していない例

全体を囲うブロックと短いブロックの両方に背景画像を指定した例
画像の背景が透明なため、短いブロックと全体を囲うブロックの背景画像が重なって表示されています。

短いブロックに背景をつける代わりに、全体を覆うブロックに背景をつけることで問題は解決します。
その際、以下の2点に注意します。

• 短いブロックには背景を指定しない。
• 背景を指定していないすべてのブロックに、全体を覆うブロックの背景が表示されることになるので、短いブロック以外のブロックには必ず背景を指定。

#cover  {
width: 600px;
margin: 20px;
background-color: orange;
}

#title  {
background-color: navajowhite;
}

#content  {
float: right;
width: 400px;
background-color: lavenderblush;
}

#menu  {
float: right;
width: 200px;
}

#foot {
clear: both;
background-color: burlywood;
}

<div id="cover">  ←崩れを防ぐため、レイアウト全体を覆うブロック

<div id="title"><p>１．タイトル（title）</p></div>
<div id="content"><p>３．内容<br>（content、幅400ピクセル）<br>本文<br>本文<br>本文<br>本文<br>本文</p></div>  ←縦に長いブロック
<div id="menu"><p>２．メニュー<br>（menu、幅200ピクセル）<br>リンク</p></div>  ←縦に短いブロック(解除ブロックとの間に隙間)
<div id="foot"><p>４．脚注など（foot）</p></div>  ←回り込み解除ブロック

</div>