参考画像の様なレイアウトのサイトを制作しているのですが、table抜きで、divとCssで組もうとするとどうも上手くいきません。

私は左右のDIV要素の下に背景画像を指定する方法をよく使います。これだとどのブラウザでも比較的安定して表示されます。

画像の白色の要素=main、灰色の要素=sub、赤色の要素=footerという識別子(ID)を割り振っている場合には、

＜div id="wrapper"＞

　＜div id="main"＞

　　白い部分

　＜/div＞

　＜div id="sub"＞

　　灰色の部分

　＜/div＞

＜/div＞

＜div id="footer"＞

　赤色の部分

＜/div＞

などとして、mainとsubをDIV要素でグルーピングします。

次にスタイルシートで、wrapperに左右の区切りをつけた背景画像を縦にリピートして表示させます。

mainとsubの背景色は透明色にしておきます。

#wrapper {

　width: 760px;

　background-image: url(bg.gif);

　background-repeat: repeat-y;

}

#main {

　float: left;

　width: 600px;

　color: #000;

　background-color: transparent;

}

#sub {

　float: right;

　width: 170px;

　color: #000;

　background-color: transparent;

}

#sub {

　clear: both;

}

上の例では、背景画像として左の600pxが白、右の170pxが灰色になっている横幅760pxの画像(縦幅は適当に64px程度とかでよいと思います)をwrapperに背景画像として指定します。

これで見た目は下までつながっているように見えるようになります。

ダミーURL: http://yahoo.co.jp/

左右の内容の量にかかわらず、左は白、右は灰色とするためには、左の div、右の div とその両方を含む div をつくって、その全体の方に背景画像（灰色を描いたもの）を縦方向にだけ繰り返しで設定するのがいいように思います。

下のリンクは参考までにどうぞ。

http://desperadoes.biz/style/dan/index.php

http://q.hatena.ne.jp/1152202081

以下のソースを見てください。

（xxxは任意の数字やピクセル）

.

.

#contents{

position: absolute ; _position : fixed ;

width : xxx.px ;

height : xxx.px ;

display : block ; //ただし、元々ブロック要素の場合指定しない。

}

.

.

＜span id="contents"＞トップページ＜／span＞

このようにすることによって、

移動しないフローティングボックスが出現するはずです。

ポイントは　position: absolute ; _position : fixed ;

です。

本来ならば本来ならば top や background-color(またはimage) が必要ですが見易さを考慮して書いていません。

ただし、この方法はややクロスブラウザ対策に難があります。

特に古いブラウザには注意すべきでしょう。

一応対策として、ボックスが動いても、問題のないレイアウトをしておくことをお勧めします。

ダミー：http://q.hatena.ne.jp/1152202081

前回、自分で動かしてみて結構動かない部分がありましたので、訂正いたします（そもそも、質問の趣旨とずれている可能性がありますが、こういう方法でもメニュー部分などが途切れていないように見せかけることはできます。強引ですが）。

以下訂正したソースを記述します。

============================================================

＜?xml version="1.0" encoding="Shift_JIS"?＞

＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞

＜html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"＞

＜head＞

＜meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /＞

＜title＞Fixed_test＜/title＞

＜/head＞

＜style type="text/css"＞

＜!－－

*{

margin:0px;

}

body{

_overflow:hidden;

}

div#Fixed_test{

position:fixed;

_position:absolute;

top:0px;

left:0px;

overflow:hidden;

width:200px;

height:500px;

padding:10px;

background:#AAAAFF;

}

div#contents{

margin-left:250px;

top:0px;

left:100%;

width:100%;

height:1000px;

overflow:scroll;

padding:20px;

background:#FFAAAA;

}

－－＞

＜/style＞

＜body＞

＜div id="Fixed_test"＞

このブロックが止まったままになります。

＜/div＞

＜div id="contents"＞

このブロックが動きます。（任意の長文を挿入）＜br /＞

＜/div＞

＜/body＞

＜/html＞

============================================================

現時点での動作確認は、FirefoxとIEのみです。

こんなものでよろしければ……。