Comment réorganiser les colonnes dans cette disposition de grille CSS?

Question

J'utilise le modèle suivant:

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

La première colonne est plus large que les deux qui suivent à droite. En termes simples, j'essaye de réorganiser la disposition de sorte que la première colonne plus large devienne la deuxième colonne, entre les deux colonnes plus étroites. J'ai passé pas mal de temps avec la mise en page CSS basée sur ma grille, mais je n'ai pas encore atteint ce but. J'apprécierais des conseils sur la façon d'y parvenir, y at-il plus d'un moyen?

EDIT: Merci pour les suggestions, cependant s'il vous plaît fournir une réponse complète si possible. Je ne suis pas sûr de savoir comment adapter les réponses pour compléter la solution.

Answer 1

Avez-vous essayé d'utiliser "position: relative"?

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

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

Answer 2

Essayez ceci:

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

... mais si votre colonne maintenant centre est toujours plus longue que notamment les colonnes latérales, vous allez avoir des problèmes.

Answer 3

Vous pouvez changer la position dans votre classe css. Essayez suivante:

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