Растяжка div с заданным float по высоте родительского div'а

[PCSpeaker]

Долго мучаюсь, но что-то не выходит. Случай вроде бы распространенный, но найти решение в интернете так и не смог.

Структура довольно простая.

<div class="main">
	<div class="mainleft">
	 меню
	</div>
	<div class="mainright">
	 содержание
	</div>
</div>

вот их стили

.main {
width: 90%;
background-color: #FFFFFF;
}

.mainleft {
width: 200px;
background-color: #FF0000;
float: left;
height: 100%;
}

.mainright {
background-color: #FFFF00;
margin-left: 210px;
height: 100%;
}

Задача: при растягивании одного из дивов (к примеру правого), левый должен стать такой же высоты и наоборот.

У меня же получается так: правый див растягивается, растягивает за собой родительский div (тот который main), а левый так и остается коротким. А должны быть все одинаковой высоты.

Грубо говоря должен получится красный прямоугольник, за ним белый прямоугольник, а за ним желтый прямоугольник. И как не меняй содержимое красного и желтого они так и будут оставаться прямоугольниками одинаковой высоты.

Заранее спасибо.

[Searcher]

Это табличное мышление. Если вы верстаете блоками, то и мыслить надо иначе. В данной ситуации не надо растягивать блок, нужно просто создать иллюзию, что блоки равны по высоте.

Не знаю, как вы искали, но решений данной задачи в интернете много. В том числе и на этом форуме и непосредственно в виде статьи на сайте htmlbook.ru.

[PCSpeaker]

Ну там не совсем то что нужно, так как к бордеру стилей особо не применишь. Зато статья навела меня на мысли, что сделать это div'ами, так еще и чтобы работало нормально во всех браузерах будет гораздо объемнее, чем элементарными двумя ячейками таблицы, что я собственно и сделал. Так что, в любом случае, спасибо.