И так, в чём суть да дело :)

Если браузер нормальный, то мы используем display: table-*, то есть создаём див с display: table-row, а в нём дивы, которые должны быть одинаковой высоты с display: table-cell. Вуаля, остался ИЕ :(

Второй метод, кроссбарузерный:

<style type="text/css">
/* Два дублирующих контейнера col-wrap*
нам нужны, что бы сделать бордеры у колонок
одной высоты, или фон внизу каждого */
.col-wrap1 {
	width:25%;
	background:blue;
}
/* второй контейнер смещён на нужное растояние
влево, с помощью маргин-райт попячен под ИЕ %) */
.col-wrap2 {
	width:200%;
	position:relative;
	left: 100%;
	background:red;
	/* чтобы ИЕ6 не раздвигал контейнер */
	margin-right:-100%; 
}
/* левую колонку с текстом смещаем на длину 
врап2 контейнера */
.col1 {
	float:left;
	width:50%;
	margin-right:-100%;
	position:relative;
	left:-50%;
}
/* что бы ничего снизу не налезло, очищаем */
.clear {
	clear:both;
	font-size:0;
	
	/* тройной презерватив для ИЕ */
	overflow:hidden; 
}
</style>
<div class="col-wrap1">
    <div class="col-wrap2">
        <div class="col1">left column</div>
        <!-- Кол2 занимает всё оставшиеся пространство -->
        <div class="col2">center column</div>
        <div class="clear"></div>
    </div>
</div>

• Посмотреть Пример

Этот замечательный, и очень простой метод я подглядел вот сдесь, спасибо Сергею.