我正在尝试将灵活列和元素与position:fixed组合在一起的布局。我们的想法是有两列，第一列是position: fixed menu，第二列是内容和文字。我希望文本为position: fixed，所以最后移动的唯一内容就是正确的内容。 问题是内容宽度，它会更改，因此我需要内容的宽度为自动，但是当我将width:auto与{{1}组合时它不起作用。
我认为我的解释不够明确，所以这里是代码：
HTML
position:fixedCSS
<div class="pageWrap">
<div class="colLeft">
<nav>
<ul>
<li>ELEMENT 1</li>
<li>ELEMENT 2</li>
<li>ELEMENT 3</li>
</ul>
</nav>
</div>
<div class="colContent">
<div class="content">
<img width="300" height="200" alt="1" src="http://lorempixel.com/output/nightlife-q-g-300-200-4.jpg">
<img width="300" height="200" alt="1" src="http://lorempixel.com/output/nightlife-q-g-300-200-4.jpg">
<img width="300" height="200" alt="1" src="http://lorempixel.com/output/nightlife-q-g-300-200-4.jpg">
</div>
<aside>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient
ridiculus mus. </p>
</aside>
</div>
</div>
我想要[这个（JSFiddle）[http://jsfiddle.net/frMxW/2/]，但是旁边.pageWrap {
width: 600px;
height: 1000px;
background-color: rgba(256, 0, 0, 0.5);
}
.colLeft {
width: 100px;
float: left;
height: 100px;
background-color: rgba(0, 256, 0, 0.5);
}
nav{
position:fixed;
background-color: rgba(0, 256, 0, 0.5);
}
.colContent {
width: 500px;
float:left;
}
.content {
float: left;
width: auto;
}
aside {
width: 200px;
float:left;
position:fixed;
}
如果我想放置较小的图像，那么留在旁边的内容没有间隙
知道我该怎么做吗？
非常感谢！
更新：我尝试了这个想法：将内容放在position:fixed旁边，似乎可以在Chrome和Firefox中使用（如果我改变图像的宽度，那么它就会停留在那里）但是它在Opera中不起作用，我无法在IE中尝试。这是我的尝试：http://jsfiddle.net/9uGw4/7/