Как иметь 2 плавающих элемента одинаковой высоты

Question

У меня есть оболочка, содержащая внутреннюю оболочку, и эта внутренняя оболочка содержит 2 плавающих элемента div. Левый содержит больше контента, чем правый, поэтому его высота больше, чем справа. Я ищу, чтобы оба контейнера имели одинаковую высоту.

http://jsfiddle.net/Kh2Fh/

Мой HTML:

<div id="wrapper">
    <div id="sub-menu">
        <div id="left-column" class="column">
            Agenda</br>
            Here I put some texte                                    
        </div>
        <div id="right-column" class="column">
            sdfdsf                          
        </div>
    </div>
</div>​

Мой css:

body{
    background-color:#E5E5E5;}

#wrapper{
    background-color:#FFFFFF;
    width:800px;
    margin-left:auto;
    margin-right:auto;
    overflow:auto;}

#sub-menu{
    margin:10px;
    width:780px;
    position:relative;
    float:left;}

.column{      
    float:left;
height:100%;}

#left-column{
    width:500px;
    background-color:yellow;}

#right-column{
    width:280px;
    background-color:magenta;}

Answer 1

Вы не можете сделать это только с помощью CSS, используя плавающие элементы, если только вы не можете гарантировать высоту каждого столбца (что, как правило, невозможно, с такой текучей средой, как сеть). Тем не менее, у вас есть варианты:

1. Использование display: table-cell: http://jsfiddle.net/8LdQk/3/. К сожалению, это не сработает в IE6 или 7. Этот пост в блоге с подробным описанием его использования может быть полезен.
2. Использование JavaScript: http://jsfiddle.net/8LdQk/5/.
3. Использование классических искусственных колонн Дана Седерхольма трюк.

Answer 2

используйте повторяющееся фоновое изображение высотой 1 пиксель с желтым размером 500 пикселей и пурпурным цветом 280 пикселей.Когда один столбец увеличивается в размерах - создается иллюзия, что оба столбца имеют одинаковую высоту.

<div class="backgroundColumn">
<div>
Left column
</div>
<div>
right column
</div>
<div class="clear">
</div>
</div>

Answer 3

Это, кажется, помогает мне. Это может быть так просто? :)

.column{float:left;height:100px;}