Comment faire pour que mon flotteur de droite ...?

Question

J'essaye de faire fluidifier ce wrapper centré avec la viewport, mais j'ai des problèmes pour placer le div-right. Voici comment le code html ressemble:

<div id="wrapper"> 
<div id="left">Left</div> 
<div id="middle">Middle</div> 
<div id="right">Right</div> 
</div> 

Et voici le (flawed-) CSS:

#wrapper{ 
top: 0px; 
width:80%; 
margin: 0 auto;} 

#left { 
top: 0px; 
margin: 0px; 
padding: 10px; 
background: #555; 
width:10%; 
height:400px; 
float:left;} 

#middle { 
padding: 10px; 
background: #666; 
height:400px; 
width:75%; 
clear:none;} 

#right { 
top: 0px; 
margin: 0px; 
padding: 10px; 
background: #777; 
width:10%; 
height:400px; 
float:right;} 

Ce qui se passe est que les bons endroits-div se dessous au centre-div au lieu de la droite. Je n'arrive pas à trouver la logique dans tout ça! ... J'ai essayé avec la position: relative, numérotée largeur, droite-div au milieu etc ... Mais rien ne le fait sauter en place. Que faire ? Thx/Nic

Answer 1

Vous pouvez permuter l'ordre des éléments html. Avoir le bon div avant le div gauche.

Il y a plusieurs autres façons de faire une mise en page à 3 colonnes, en utilisant position: absolute par exemple. Google autour de "3 colonnes" et vous devriez trouver quelques bons exemples.

Answer 2

Vous devez faire flotter le #middle div vers la gauche, et appliquer une marge au #left, selon le cas. Cela devrait résoudre le problème :).