позиция: фиксированная и ширина: авто

Question

Я пытаюсь выполнить компоновку, объединяющую гибкую колонку и элементы с position:fixed. Идея состоит в том, чтобы иметь 2 столбца, в первом - position: fixed menu, во втором - и текст. Я хочу, чтобы текст был position: fixed, поэтому в конце единственное, что движется, - это правильный контент. Проблема заключается в ширине содержимого, она меняет, поэтому мне нужна ширина содержимого авто, но когда я совмещаю width:auto с position:fixed, его не работает.

Я думаю, что мое объяснение не ясно, достаточно, так вот код:

HTML

<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> 

CSS

.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; 
     } 

Я хочу, чтобы [это (JSFiddle) [ http://jsfiddle.net/frMxW/2/], но с учетом position:fixed и что если я хочу pu t меньшие изображения в остальном остаются рядом с содержимым без зазора

Любая идея, как я могу это сделать?

спасибо!

UPDATE: Я попробовал эту идею: положить содержание и в сторону, чтобы display:inline-block, кажется, работает в Chrome и Firefox (в стороне остается там, если я изменить ширину изображения) но это не работает в Opera, и я не могу попробовать в IE. Вот моя попытка: http://jsfiddle.net/9uGw4/7/

Answer 1

[Обновлено] this solution работает на вас?

Я установил как <aside>, так и colLeft, а ширина содержимого установлена ​​на авто, с полями с обеих сторон.