Как сверстать 2 блока?

штука в том, что чтобы оба блока меняли ширину пропорционально, им нужно задавать ширину в процентах.
но если будет достигнут предел min-width, то нижний блок сместится, но ширина его при этом будет не 100%. выход - @media

HTML(только body):

<div id="main">
<div id="content">
<div class="container">
...
</div>
</div>
<div id="navbar">
<div class="container">
...
</div>
</div><br class="clearfloat" />
</div>

CSS:

<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#main {
width: 90%;
max-width: 1240px;
min-width: 780px;
background-color: #000000;
margin: 0 auto;
overflow: hidden;
padding:0 0 50px;
}
#navbar {
float: left;
width: 35%;
background: #FFFFFF;
}
#content {
padding: 10px 0;
width: 65%;
float: left;
background: #FFFFFF;
}
.container { padding:10px; }
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;

}
@media all and (max-width: 780px){
#content, #navbar { width:100%; }
}
-->
</style>
<!--[if lt IE 8]>
<style type="text/css">
#navbar { margin-right: -1px; }
</style>
<![endif]-->

без исправлений для IE6 (min-width, max-width в нем работать не будут. )
.container - нужен только для отступов внутри блоков.
IE<9 не понимают CSS запросов вида @media all and (max-width: 780px)
для них скрипт:

<script type="text/javascript">
function ieSupport(){
document.getElementById('content').style.width=document.body.clientWidth<780?'100%':'65%';
document.getElementById('navbar').style.width=document.body.clientWidth<780?'100%':'35%';
}
if(document.all) window.onload=window.onresize=function(){ ieSupport(); }
</script>

тебе надо задать фиксированый размер внешнего блока, в котором два других.
плавающую точку во внутренних убери а сделай #main div{float:right};И попробуй у внутренних позиционирование задать релативным..

попробуй max-width сделать в % в обоих дивах