Как бы вы переставили столбцы в этом макете CSS-сетки?

Question

Я использую следующий шаблон:

http://www.styleshout.com/templates/preview/KeepItSimple11/index.html

Первый столбец шире, чем два следующих за ним справа. Проще говоря, я пытаюсь изменить порядок расположения так, чтобы более широкий первый столбец стал вторым столбцом между двумя более узкими столбцами. Я потратил немало времени на CSS-макет, основанный на сетке, но не приблизился к этому. Буду признателен за любые советы о том, как этого добиться, есть ли больше способов, чем один?

РЕДАКТИРОВАТЬ: Спасибо за предложения, однако, если возможно, предоставьте полный ответ. Я не уверен, как адаптировать ответы, чтобы завершить решение.

Answer 1

Вы пробовали использовать "позиция: относительная"?

#left-row {
    position:relative;
    left:100px;
}

#right-row {
    position:relative;
    left:-100px;
}

Answer 2

Вы можете изменить положение в своем классе CSS. Попробуйте следующее:

#RightContent{
left: auto;
right: 0; 
width: 150px;
background-color: navy;
}

#LeftContent{
position: absolute; 
top: 0; 
left: 0; 
width: 200px;
height: 100%;
background-color: navy;
}

#MiddleContent{
position: fixed; 
top: 0;
left: 200px;
right: 150px;
bottom: 0;
overflow: auto; 
background: #fff;
}

Answer 3

Попробуйте это:

div#content-wrapper #main {
    left:230px;
    position:absolute;
    top:0;
}
div#footer-wrapper {
    clear:both;
}
div#content-wrapper {
    left:0;
    overflow:hidden;
    position:relative;
    top:0;
}
#left-columns .omega {
    float:right;
}

... но если ваш теперь центральный столбец когда-нибудь заметно длиннее боковых столбцов, у вас будут проблемы.