リキッドやエラスティックレイアウトの時に図を一緒に拡大縮小する方法と、サイドバーの背景の高さを下まで持ってくるやりかたです。

リキッドイメージ、エラスティックイメージ

リキッドレイアウトやエラスティックレイアウトにおいて、コンテンツのイメージも一緒に拡大縮小するようにする方法です。文字をデカくしたい人は図もデカくしたいでしょうから。
図は実際にやってみたスクリーンショットです。リキッドレイアウトなので、フォントサイズは変わっていませんが、画像が縮小しているのが分かるかと思います。

• 実際見せるより大きい画像（幅500pxとか）を用意する。
• HTMLのimgタグにwidth, height属性を書かない。
• CSSでimgにwidthを％かemで指定する（25%(=125px)とか）。
• 一応max-widthに最大幅を指定（max-width:500pxとか）しておき、モザイクにならないようにする¹ 。
• imgのpaddingも%かemで付けるべきでしょう。

CSSの例

div#content p img {
   width: 25%;
   max-width: 500px;
   float: left;
   padding: 2%;
}

Faux columnsをリキッドレイアウトに適用する

今度は拡大縮小の話ではありません。

Faux columnsとは？

通常、サイドバーとメインコンテンツの高さは違いますので、サイドバーに当サイトのようにグレーに色を塗ると、ボックスが途中で切れているのがよく分かってしまいます。

これの例えばサイドバーを、下まで全部グレーに塗ろうと思うと、wrapperになっているボックス要素の背景にグレー帯の縦1ピクセルの背景画像をCSSでrepeat-yするのが一般的でしょう。

CSS

div#wrapper {
   background: #fff url(images/bgbar.gif) repeat-y left top;
}

これをFaux columnsと言うそうです。良くやる手だと思います。当サイトはやってませんがｗ。

background-postionに％を指定するとは？

background-postionにpx（ピクセル）を指定した場合は、適用するボックスの左上から数えて指定したピクセルのところにbackground-imageの左上角が来るように配置されます。

ところが、%を指定した時は、「background-imageについて指定した%にあたる点が、適用するボックスについて指定した%に当たる点に来るように」配置されます（図）。

リキッドレイアウトの背景をずらさないように配置する

上記の背景位置に%を指定した時の挙動を、水平方向だけ使用して、リキッドレイアウトで画面を広げていって、サイドバーが広がっても、背景も広がるように見せます。

• とても長い、高さ1ピクセルの背景画像を作る（1000pxとか）。
• サイドバーの背景部分に色を塗って、コンテンツの部分は透過させます（透過GIFを作る）。透明でも長さは必要です。
  
• サイドバー部分の色を塗る長さは、リキッドレイアウト時に、上記の例ではdiv#menuにあたるところが何%になっているかをそのまま適用します。例えば背景画像を1000pxとし、div#menuのwidthが25%だったら、250pxの長さまで塗ります。
• CSSで背景の水平位置に指定した%を記述して、repeat-yします。

CSS

div#wrapper {
   background: #fff url(images/bg-liquid.gif) repeat-y 25% 0;
}

上記の例のように両側にサイドバーがある場合は、HTML構造上、もう一つ#wrapperを作るしかありません。

それと、上記の例でも同じですが、#wrapperの中身が全部フロートするとボックスの高さが無くなってしまいますので、footerとかを#wrapperに入れて、CSSでclear: both;とかしておかないと、背景も出なくなりますので、念のため。

そして、反対向きの上記のような透過GIFを作成して、今度は例えば75%から右を塗ります。CSSは以下のようになります。透過GIFを重ねているので左右どちらの背景も表示されます。

CSS

div#wrapper1 {
   background: #fff url(images/bg-liquid-left) repeat-y 25% 0;
}
div#wrapper2 {
   background: #fff url(images/bg-liquid-right) repeat-y 75% 0;
}

最後は図を作るのが嫌になりました．．．

1. IE6ではmax-widthは効きません。モザイクにしたくない場合は巨大な画像にすればOKです