我有一个菜单div，我想让它固定在左边，而其余的滚动内容则漂浮在它的右边。我的菜单宽度为20%，顶部框宽80%，顶部框下的框宽20%，所以它们应该对齐以填充屏幕，唯一的问题是div浮动在固定元素的后面，而不是旁边，解决这个问题的最好方法是什么?
这是jfiddle http://jsfiddle.net/8y2t2/14/。
"maintop"div应该填充剩余的80%的屏幕宽度，而不是浮动在"leftnav"div后面，并让"portfolio"框浮动在它旁边。我觉得我错过了一些简单的解决办法?什么好主意吗?
* { margin: 0; }
html, body { height:100%; }
body {margin:0px;background-color:#fff;}
#leftnav {background-color:#232323;width:20%;min-height: 100%;height:auto!important;float:left;text-align:center;position:fixed;left:0;}
#portfolio {white-space: nowrap;text-align:center;margin:0;}
#portfolio ul {margin:0;padding:0;}
#portfolio li {width: 20%;display:inline-block;text-align: center;vertical-align: middle; margin:0;padding:0;float:left;}
#portfolio img {max-width:100%;margin:0;padding:0;}
#maintop {width:80%;height:45%;background-color:#caab7e;float:left;text-align:center;}
<body>
<div id="leftnav"></div>
<div id="maintop"></div>
<div id="portfolio">
<ul>
<li><img src="http://dummyimage.com/400x300/000/fff"></li>
<li><img src="http://dummyimage.com/400x300/090/fff"></li>
<li><img src="http://dummyimage.com/400x300/900/fff"></li>
<li><img src="http://dummyimage.com/400x300/009/fff"></li>
<li><img src="http://dummyimage.com/400x300/000/fff"></li>
<li><img src="http://dummyimage.com/400x300/090/fff"></li>
<li><img src="http://dummyimage.com/400x300/900/fff"></li>
<li><img src="http://dummyimage.com/400x300/009/fff"></li>
<li><img src="http://dummyimage.com/400x300/000/fff"></li>
<li><img src="http://dummyimage.com/400x300/090/fff"></li>
<li><img src="http://dummyimage.com/400x300/900/fff"></li>
<li><img src="http://dummyimage.com/400x300/009/fff"></li>
</ul>
</div>
</body>
#maintop和#portfolio使用如下css:这是有效的，因为你的绝对定位从文档流中删除了#leftnav。即使#leftnav的大小为20%，它的作用就好像它是在一个单独的图层上，这导致你的其他两个div计算它们相对于文档主体的位置。
#maintop {
width:80%;
height:45%;
background-color:#caab7e;
float:right;
text-align:center;
}
#portfolio {
text-align:center;
float:right;
width:80%;
margin:0;
}