掲示板/スタイルシート質問板/過去ログ/一覧/ 2段組での背景色の問題

0 名前： tonma ： 2007/04/02（月） 13:33 ID:qvQhTDFe sub-HD: 初歩的な質問失礼します。

cssにて2段組で構成したいのですが、
左列に背景色を設定した場合、右列（right_main）の内容が長いと左（left_side）の背景色がフッダー部分まで届かない現象がおき、それを回避したいのですが。
よろしくお願いします。

2段組は、下記のように書いています。

.left_side{
float: left;
width: 200px;
　　background-color: #cccccc;
}
.right_main{
float: right;
width: 500px;
}
/*フッダー部として*/
address{
clear: both;
}

よろしくお願いします。

1 名前：匿名： 2007/04/02（月） 13:33 ID:DA0rF3ZF sub-Ds: ｃｓｓは html に対する飾り付けです。
ｃｓｓだけでは何の動作もしません。
html部分も出してください。

2 名前：匿名： 2007/04/02（月） 13:33 ID:qvQhTDFe sub-HD: html部分、失礼しました。

【html】
<Body>
<div class="all">

<div class="left_side">
<P>left_sideの内容</p>
</div>

<div class="right_main">
<P>left_sideの内容</p>
<P>left_sideの内容</p>
<P>left_sideの内容</p>
<P>left_sideの内容</p>
</div>

</div>
<address>○○○○</address>
</body>

【css】
.all{
width: 700px;
}

.left_side{
float: left;
width: 200px;
background-color: #cccccc;
}

.right_main{
float: right;
width: 510px;
}
/*フッダー部として*/
address{
clear: both;
}

上記の書き方では、<div class="right_main"></div>内の行数が左（left_side）より多いと、左（left_side）の背景色がフッダー部分まで届かないのは、当然の様子です。
背景色をフッダー部まで表示ために、左（left_side）内に、<p> </p>をいくつか入れ込んだりして、調整していますが、更新の度にバランスを見る手間がかかっています。
2段組での組み方、他に方法があるのでしょうか。

どうぞ、よろしくお願いします。

3 名前： tonma ： 2007/04/02（月） 13:33 ID:qvQhTDFe sub-HD: >2.の匿名
は、質問主の、tonmaです。

失礼しました。

4 名前：匿名： 2007/04/02（月） 13:33 ID:DWKvPLO3 sub-Ds

css 部分を以下にして見てください。

.all{
width: 700px;
background:#cccccc;/*足したよ*/
overflow:hidden;   /*足したよ*/
}
.left_side{
float: left;
width: 200px;
background-color: #cccccc;
_width:700px;                     /*足したよ*/
border-right:500px solid #FFFFEE; /*足したよ*/
margin-right:-500px;              /*足したよ*/
}

.right_main{
float: right;
width: 500px;
background-color:#FFFFEE;         /*足したよ*/
}
/*フッダー部として*/
address{
clear: both;
}

色がついてないとわかりにくいと思って、反対側に薄い黄色（#FFFFEE）をつけました。どっちが行数多くても長いほうにあわせます。
ちょっとトリッキーなので、参考にしたページをアップしますね。図を見れば、多分わかると思います。
http://www.k5.dion.ne.jp/~i-araki/css/gijihaikei.html

5 名前： tonma ： 2007/04/02（月） 13:33 ID:qvQhTDFe sub-HD: 匿名様

ありがとうございました。
無事表示させることが、できました。

が、通常Dreamweaver8上で編集してまして、Dreamweaver8のデザインビューでは、うまく表示しません。
特に<div right_main>内では、全然表示しない状況です。

どちらを優先するかの問題になり、考えてしまいました。
でもありがとうございました。

6 名前：匿名： 2007/04/02（月） 13:33 ID:w1Jh6EfD sub-Ds: 持ってないソフトは、わからないのですが何が悪いのでしょうね？
right_main
float: right;
をleftに

.allの
overflow:hidden;
を外す。
を試してみてください。

あと、いわゆるネガティブマージンは、そのソフト上手く表示されますか？
互換モードですよね？
そうでなかたら、
.left_sideの
_width:700px;
を外してみてください。

7 名前： tonma ： 2007/04/02（月） 13:33 ID:qvQhTDFe sub-HD: 匿名さん、ありがとうございます。

> 持ってないソフトは、わからないのですが何が悪いのでしょうね？
> right_main
> float: right;
> をleftに

> .allの
> overflow:hidden;
> を外す。
> を試してみてください。

上記、試してみていますが、変わらないです。

> あと、いわゆるネガティブマージンは、そのソフト上手く表示されますか？
ここは、うまく表示されます。

> 互換モードですよね？
> そうでなかたら、
> .left_sideの
> _width:700px;
> を外してみてください。
互換モードではないので、すでにはずし済みでした。

<div right_main>内が、全然表示しない状況と、あと< div class="left_side">内では、横1em分しか表示しないので、文字が縦に書かれた状態になっています。
Dreamweaver8が対応していないからとあきらめています。
度々、ありがとうございました。