フッタをアウトライン最下部へ表示した

[新着] Webテンプレートを仮オープンしました

0   名前： okko ： 2007/01/24（水） 14:44  ［URL］  ID:h10fXoUf sub-t1
URLを参考に、今度はフッタです。
ヘッダ
左メニュー、右内容
フッタ
といった形のサイトをつくっています。

<div id="outline">
<div id="head"></div>
<div id="right"></div>
<div id="left"></div>
<div id="foot"></div>
</div>


といった感じで(かなり割愛しましたが)
今、rightとleftをposition:absolute;でヘッダ直下に並べています。
rightとleftの縦幅はまちまちです。
footを常にrightとleft、どちらか縦幅が長い方の直下に表示したいのですが、
どうすればいいですか？
なるべくならfloatを使いたくないのですが…

よろしくお願いします。
1   名前： 匿名 ： 2007/01/24（水） 14:44  ID:EHLsnZ8D sub-Cl
<div id="outline">
 <div id="head"></div>
 <div id="◆◆"><!--NEW-BOX▼-->
  <div id="right"></div>
  <div id="left"></div>
 </div><!--NEW-BOX▲-->
 <div id="foot"></div>
</div>

縦方向に3段のレイアウト!!!OK
2   名前： 匿名 ： 2007/01/24（水） 14:44  ID:EHLsnZ8D sub-Cl
>>1です
勘違いをしてしまいました、無視して下さい。すみません。
m(_ _)m　　<(_ _)>　　_(_^_)_
3   名前： key-child ： 2007/01/24（水） 14:44  ID:8GUFlW2K sub-DR
rightとleftが可変ならpositionプロパティを使ってたら無理なんじゃないのかな？
シンプルなサイトならfloatプロパティを使ったほうが簡単な気が・・・

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html lang="ja" dir="ltr">

<head>
 <meta http-equiv="content-type" content="text/html;charset=shift_jis">
 <title>Test HTML</title>

 <meta http-equiv="content-style-type" content="text/css;charset=shift_jis">
 <style>
<!--

/* ↓どうでもいい↓ */
body {
 font-size: medium;
 color: #000000;
 background-color: #ffffff;
}

#head, #foot {
 height: 50px;
 background-color: #ff0000;
}

#right, #left {
 width: 50%;
 float: left;
}

#right {
 background-color: #00ff00;
}
#left {
 background-color: #0000ff;
}
/* ↑どうでもいい↑ */

#right {
 height: 50px;/* 変えてみる */
}

#left {
 height: 50px;/* 変えてみる */
}

#foot {
 clear: left;
}

-->
 </style>

</head>

<body>

<div id="head">head</div>
<div id="right">right</div>
<div id="left">left</div>
<div id="foot">foot</div>

</body>

</html>

4   名前： okko ： 2007/01/24（水） 14:44  ID:h10fXoUf sub-t1
positionを使っていると無理…
了解です
ありがとうございました！
一覧へ戻る