CSSで左右の高さを調整できてる手法

質問

次のＣＳＳ(外部)を作成しました
*{margin: 0px; padding: 0px;}
body{background: #FFFFCC; line-height: 150%; margin-left: 10px;}
/* メインのフレームpage 色は水色とする，枠線は灰色*/
.page{background: #00FFFF; border: 1px solid #CCCCCC; width: 815px; margin: 5px auto;}
/*上の２行のヘッダー*/
.header1{padding: 10px 5px 10px 5px; margin: 0px; background: #FFFFFF;}
.header2{padding: 5px; background: #99FFCC; height: 25px;}
/*左右の指定、左はpageの色を使用*/
.main{border-left: 1px solid #FF00FF; margin: 0px; padding: 10px 5px; background: #66FF00; float: right; width: 620px;}
.menu{margin: 0px; padding: 10px 5px; float: right; width: 193px;}
/*最下のフッター指定(通常コピーライトなどの領域)*/
.footer{border-top: 1px solid #CCCCCC; margin: 0px; padding: 0px 5px; clear: both; background: #CC99FF;}

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
htmlの方はPageをDIVで囲みその中に他のDIV要素入れてあります。

ＣＳＳを作成するにあたって参考にしたのが
http://www.shoshinsha.com/hp/template/layout/simpe02.zip
です。
このサイト右側をいくら長くなっても左側もついて行くのは
Pageの色にしているのはわかりました。
余計なものは不要ですので最低限を残して改良して資料を見たりして
コメント入れたりと勉強しながら作成したのが上です。
しかしＩＥ６で見ると左がフッダーの色に浸食された感じになります。
また改良したのは多少名前を変えてはいますがそれは問題なさそうなのも確認しています。
右より回り込ませています。
理由はリンクが下にあった方が追加の時に楽だからです。
またこのサンプルは、ブロックレベル要素の高さを揃えるために
overflow: hidden;や、padding-bottomプロパティとmargin-bottomプロパティの32768px;や-32768px;を使っていないしＪＡＶＡも使ってないようです
http://www.google.co.jp/search?sourceid=navclient&aq=t&hl=ja&ie=UTF-8&rlz=1T4GZAZ_jaJP265JP285&q=%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e8%a6%81%e7%b4%a0%e3%81%ae%e9%ab%98%e3%81%95%e3%82%92%e6%8f%83%e3%81%88%e3%82%8b%e3%80%80CSS
(参考に検索したもの、上位の数ページを見たのですが。)
このサンプルはどういうテクニックを使っているのかと、
上のＣＳＳのどこを直せばよいでしょうか。
右側が長くなり左が余った分の所になぜかフッターの背景色が
入ってきているのです。
文字の大きさや文字色は必要ありません
左右もそうですが左のラインから10pxくらいとって文字が入力できれば
いいです。
よろしくお願いします。
http://oshiete1.goo.ne.jp/qa3992750.html
上も見ましたがちょっと違う(サンプルは同じもの使ってますが)ので
質問させて頂きます。
どなたかお願いします。

回答No.4

noname#66720

＞最近はどんなのが使われているのでしょうか

実際のボックスの高さは揃えずに、見た目を同じにするテクニックです。
大雑把に言うと、横に並ぶ2つのボックスがあるとして、その2つのボックスをdivで囲いそれに背景色や画像を指定することでボックスの長さが同じように見えるというものです。
divの高さは長いほうのボックスに合わせられるため、はみ出ることはありません。

注意する点としては横幅指定をpxで固定にしなければならないことですが、あまり問題にはならないと思います。

ちなみに、上記の方法では大抵clearfixというコードが使われます。

お礼

ご回答ありがとうございます。

補足

なるほど考えは分かりました
つまり左右のカラムを包む親カラムなるものを作成する
方法ですね。
じっくりと挑戦してみます。

回答No.3

font_color

＃2の補足です。
<div class="waku">でmain+menuを囲んだ場合、float要素なので、footerまで囲んだほうが早いかもしれないです。
（先ほどのソースでは/が抜けていましたね・・。）
あと、firefoxで確認したところmenu部分も変更したほうがいいですね。
.menu{margin: 0px; padding: 10px 5px; float: left;}

ちなみに、menu部分が大きくなる場合もあるので、できれば背景は画像で幅を調整して、repeat-yで繰り返す方がいいかと思います。

お礼

ご回答ありがとうございます。
なるほどmainとmenuの部分を囲んで横のカラムと考えてから
縦のカラムをその中にという考えですか。
イメージはわかりました。
ありがとうございます。
repeat-yで繰り返すというとrepeat-yはどういうことでしょう

背景画像を繰り返したりしなかったりの指定はわかるのですが
背景はただの色指定なのでそこまで凝っていません
というか、そこまで理解しきれません。

必要な画像は一番上にタイトルロゴの表示がCSSで設定できないような所ですね。
htmlに画像を指定してdiv範囲にはめるしかないですね。
CSSは外部なのでリンクでなりますが画像は毎回指定しないと
ならないのが欠点かなと思います。

この形状なのは本来フレームを使っていましたが検索エンジンの最適化(SEO)にとって悪いと言うことでフレームの除去を目的と更新を
しやすいようにすることが求められるからです。
ＲＳＳとかＸＭＬとか最近訳のわからないのが増えてきて
意味はわかっても具体的な使い方がわからないのが多いです。

ご回答ありがとうございました。

回答No.2

font_color

参考サイト(zip?)は見ていませんが、
別のdiv要素(仮にクラス「waku」)でmenu+main部分を囲んで、
そこにmenuの背景色を指定してみてはどうでしょうか？

--- CSS ---
*{margin: 0px; padding: 0px;}
body{background: #FFFFCC; line-height: 150%; margin-left: 10px;}
/* メインのフレームpage 色は水色とする，枠線は灰色*/
.page{ border: 1px solid #CCCCCC; width: 815px; margin: 5px auto;}
/*上の２行のヘッダー*/
.header1{padding: 10px 5px 10px 5px; margin: 0px; background: #FFFFFF;}
.header2{padding: 5px; background: #99FFCC; height: 25px;}
/*左右の指定、左はpageの色を使用*/

.waku{background: #00FFFF;}/* ここを追加 */

.main{border-left: 1px solid #FF00FF; margin: 0px; padding: 10px 5px; background: #66FF00; float: right; width: 620px;}
.menu{margin: 0px; padding: 10px 5px; float: right; width: 193px;}
/*最下のフッター指定(通常コピーライトなどの領域)*/
.footer{border-top: 1px solid #CCCCCC; margin: 0px; padding: 0px 5px; clear: both; background: #CC99FF;}

----- html -----
<div class="page">
<div class="header1">1</div>
<div class="header2">2</div>
<div class="waku"><!-- 追加 -->
<div class="main">
<p>main</p><br>
<p>main</p><br>
<p>main</p><br>
<p>main</p><br>
<p>main</p><br>
</div>
<div class="menu">
<p>menu</p>
</div>
<div><!-- 追加 -->
<div class="footer">footer</div>
</div>

お礼

ご回答ありがとうございます。

回答No.1

noname#66720

<div id="WRAPPER">

　<h1 id="HEADER">ヘッダー</h1>

　<div id="MAIN">右</div>

　<div id="SIDE">左</div>

　<p id="FOOTER">フッター</p>

</div>

#WRAPPER {
　width:815px;
　background:url(image.gif) repeat-y; /* ここでコンテンツの背景画像を指定する */
}

#MAIN {
　display:inline; /* IE6のバグ回避 */
　width:620px;
　float:left;
　margin:10px 5px;
}

#SIDE {
　display:inline; /* IE6のバグ回避 */
　width:165px;
　float:right;
　margin:10px 5px;
}

#FOOTER {
　clear:both;
}

軽く質問を読んだ程度なので微妙に的外れかもしれませんが、最低限こんな感じで基本レイアウトはできると思います。
paddingで伸ばしてoverflowで切るのは、現状あまり使われて無いテクニックですね。

お礼

ご回答ありがとうございます。
paddingって領域内のサイズの指定ですよね。
overflowで切るのは最近使われていないとのことですが
最近はどんなのが使われているのでしょうか
上を参考に一から作成し直していたものでご返答遅くなりました。
現状ＩＥではうまく行っているようですがこれから本文を入れたりして
問題ないかはこれからの課題ですね。