匿名質問者
匿名質問者匿名質問者とは「匿名質問」を利用して質問した質問者。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら

CSSのheightについての質問です


すべての背景の高さをそろえたいと思っているのですが、うまくいきません
たとえば
[HTML]/////////////////
<div id="footer">
<div id="footer_left">
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
</div>
<div id="footer_center">
<p>Good morning</p>
</div>
<div id="footer_right">
<p>Good afternoon</p>
</div>
</div>

[CSS]//////////////////////
#footer{
overflow:hidden;
width:900px;
}
#footer_left{
float:left;
width:300px;
background:pink;
}
#footer_center{
float:left;
width:300px;
background:black;
}
#footer_right{
float:left;
width:300px;
background:orange;
}
///////////////////////////////
とした時にfooter_center,footer_rightの背景の高さをfooter_leftの高さに揃えることができませんでした


初歩的な質問で申し訳ありませんがお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/10/27 16:27:14
  • 終了:2012/11/03 16:30:04
匿名質問者

質問者から

匿名質問者2012/10/27 17:04:23

footer_leftの内容は自動でRSS取得して表示させようと思っていますので高さは記事のタイトルの長さによって毎回違ってきます

もしheightを固定する以外の方法がありましたら、お願いします

回答(1件)

匿名回答1号 No.1

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2012/10/27 21:37:23

display: table / display: table-cell で、
下記のように指定すればお望みのものでしょう。

#footer{
    overflow:hidden;
    width:900px;
    display: table;
}
#footer_left{
    width:300px;
    background:pink;
    display: table-cell;
}
#footer_center{
    width:300px;
    background:black;
    display: table-cell;
}
#footer_right{
    width:300px;
    background:orange;
    display: table-cell;
}

firefoxなどは早くからdisplay: tableに対応していましたが、
IEは8でようやく対応しました。 IE7 のように古いブラウザまで対応したいならば、
親要素(footer)の背景に幅900pの画像を貼り付けて擬似的に見せるなどの手を使うか、
javascriptで幅を動的に変更するかといったことで対応することになります。
(背景画像のほうが多くの環境をカバーできますし、仕組みもかんたんなのでお勧めします)

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません