Two columns: rubber and fixed. Float and Clear in first?

There is a simple layout in two columns (rubber website with a fixed menu) and pasted the footer. Menu width is specified in px (not suitable interest). The menu is above the content.


How to make float and clear inside of the rubber block does not affect the layout? Now everything that comes after clear moves down to the height of the menu.


The fact that the site is old and contains hundreds of ready-made pages (used "clear: both"). Typeset new design. The challenge is not to break what is.


Example:
jsfiddle.net/yRcg7/


HTML:
<div class="sidebar">Menu</div>
<div class="content">
before
the <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;}
October 8th 19 at 01:30
3 answers
October 8th 19 at 01:32
Obviously: do not use float for other purposes (popups and text wrapping): jsfiddle.net/yRcg7/1/
The height of the menu in advance unknown and it may be above the content, i.e. the min-height for content is not suitable... - Tyshawn11 commented on October 8th 19 at 01:35
Then you can make this table one row and two columns will work even in IE6. Or a sin? - emmitt_Kohl commented on October 8th 19 at 01:38
October 8th 19 at 01:34
clear to remove the parent to overflow:auto or hidden
The fact that the site is old and contains hundreds of ready-made pages (used "clear: both"). The challenge is not to break what is. - Tyshawn11 commented on October 8th 19 at 01:37
October 8th 19 at 01:36
so .content{overflow: hidden} decides everything, and the site cannot look, it would be handy

Find more questions by tags CSSHTML