How would you rearrange the columns in this CSS grid layout?

Question

I'm using the following template:

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

The first column is wider than the two that follow it to the right. Simply put, I'm trying reorder the layout so that the wider first column becomes the 2nd column, in between the two narrower columns. I've spent a fair amount of time with the grid based CSS layout but have not come close to achieving this. I'd appreciate any guidance on how to achieve this, are there more ways than one?

EDIT: Thanks for suggestions, however please provide a complete answer if possible. I'm not sure how to adapt the answers to complete the solution.

Answer 1

Have you tried using "position: relative"?

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

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

Answer 2

Try this:

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

... but if your now-center column is ever notably longer than the side columns, you're going to have problems.

Answer 3

You can change the position in your css class. Try following:

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