Две колонки: резиновая и фиксированная. Float и Clear в первой?

Question

[Hint]

Есть простой макет в две колонки (резиновый сайт с фиксированным меню) и приклеенным футером. Ширина меню указана в px (проценты не подходят). Меню может быть выше контента.


Как сделать так, чтобы float и clear внутри резинового блока не влияли на макет? Сейчас все то, что идет после clear сдвигается вниз на высоту меню.


Дело в том, что сайт старый и содержит сотни сверстанных страниц (часто используется «clear: both»). Верстается новый дизайн. Стоит задача не сломать то, что есть.


Пример:
jsfiddle.net/yRcg7/


HTML:

<div class="sidebar">Menu</div>
<div class="content">
    before
    <div>
        <div class="float" style="background: black;"></div>
        <div class="float" style="background: white;"></div>
        <div class="clear"></div>
    </div>
    after
</div>

CSS:

.sidebar {width: 100px; float: right; background: red; height: 200px;}
.content {margin-right: 150px; background: silver; height: 500px;}
.float {float: left; width: 20px; height: 20px;}
.clear {clear: both;}

Comments

[Hint]

Поддержка IE6 не требуется.

Answer 1

[Stdit]

Очевидно же: не использовать float не по назначению (всплытие и обтекание текстом): jsfiddle.net/yRcg7/1/

Comments

[Hint]

Высота меню заранее неизвестна и она может быть выше контента, т. е. min-height для content не подходит…

[Stdit]

Тогда можно сделать это таблицей из одной строки и двух колонок, будет работать даже в ИЕ6. Или грех?

Answer 2

[HeavenlyDrug]

clear убрать, родителю overflow:auto или hidden

Comments

[Hint]

Дело в том, что сайт старый и содержит сотни сверстанных страниц (часто используется «clear: both»). Стоит задача не сломать то, что есть.

Answer 3

[Данила Буянов]

так-то .content{overflow: hidden} все решает, а на сайт нельзя взглянуть, было бы сподручнее