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

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

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

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

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

投稿日時 - 2008-08-24 22:57:11

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

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

投稿日時 - 2008-08-18 20:35:40

参考サイト(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>

投稿日時 - 2008-08-18 19:55:52

<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で切るのは、現状あまり使われて無いテクニックですね。

投稿日時 - 2008-08-17 12:59:27