CSS: две колонки с 50% текучей средой без учета минимальной ширины

Я пытаюсь использоватьэто макет с двумя 50% ширины столбца вместо. Но кажется, что когда правый столбец достигает минимальной ширины, он проходит под левым столбцом. Есть ли способ использовать технику 'shim', чтобы установить минимальную ширину для оболочки, чтобы оба столбца перестали изменять размер. Таким образом, устраняется проблема с нахождением правой колонки под левой колонкой.

Моя страница выглядит следующим образом.

<style type="text/css">

#left {
    float: left;
    width: 50%;
}

.minwidth {
    width: 500px;
    height: 0;
    line-height: 0;
}

</style>

<div id="wrapper">
    <div id="left">
        left
    </div>
    <div id="right">
        right
    </div>
    <div class="minwidth">&nbsp;</div>
</div>

Проблема в том, что левый столбец перестанет изменять размер, но правый столбец опустится ниже левого столбца и продолжит изменение размера. По сути, эффект, который я хочу получить, - это как только ширина обертки становится ниже, что и левый, и правый столбцы также перестают изменять размер. Установка подкладки в левый и правый столбцы также не сработала.

Есть ли другой способ получить два столбца шириной 50% и использовать прокладку для правильной установки минимальной ширины?

Спасибо.

Изменить: пробелы в классе minwidth на самом деле, но он был преобразован. ;)

Ответы на вопрос(8)

Ваш ответ на вопрос