html - フローティング div を同じ高さにする

Question

2つのdivが並んでいます。それらの高さは前もってわかりませんが、内容によって変わりました。CSSだけを使用して、そのうちの1つが伸びた場合でも、それらが常に同じ高さになるようにする方法はありますか?

表示するフィドルを作成しました。赤と青のdivを同じ高さにしたい...

http://jsfiddle.net/7RVh4/

これはcssです：

#wrapper {
width: 300px;
}
#left {
    width:50px;
    background: blue;
    float:left;
    height: 100%;  /* sadly, this doesn't work... */
}
#right {
    width:250px;
    background: red;
    float:left;
}

Answer 1

float を使用する代わりに、 を使用してみてくださいdisplay: table-cell。ただし、一部の古いブラウザではこのルールが理解できない場合があります。下記参照：

#wrapper {
    display: table; // See FelipeAls comment below
    width: 300px;
}

#left {
    display: table-cell;
    width: 50px;
    background: blue;
}

#right {
    display: table-cell;
    width: 250px;
    background: red;
}

Answer 2

あなたがやろうとしていることを行う方法を説明するこの記事を読むことをお勧めします。私はそれを示すフィドルを置きますが、それはかなり広範で純粋なcssです。http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Answer 3

このCSS トリックを使用すると、テーブルを使用せずにこれを行うことができます。

例 - http://jsfiddle.net/LMGsv/

HTML

   <div id="wrapper">
            <div id="columns">
                <div id="left">text</div>
                <div id="right">text<br/>another line<br /></div>
            </div>        
    </div>

CSS

#wrapper {
    float:left;
    width: 300px;
}
#columns {
    float:left;
    width:300px;
    background:blue;
}
#left {
    float:left;
    width:50px;
    background: blue;
}
#right {
    width:250px;
    background: red;
    float:left
}