How to make my right-box float right...?

Question

I'm trying to make this centred wrapper work fluidly with the viewport, but im having problems with placing the right-div. Here is how the html looks:

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

And here is the (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;}

What happens is that the right-div places itself underneath the middle-div instead of to the right. Can't seem to find the logic in this!... I've tryed with position:relative, numbered width, right-div inside the middle etc... But nothing makes it jump into place. What to do ? Thx /Nic

Answer 1

You should float the #middle div to the left, and apply some margin to the #left as appropriate. This should solve the problem :).

Answer 2

You can swap the order of the html elements. Have the right div before the left div.

There are several other ways to make a 3 column layout though, using position:absolute for example. Google around for "3 column layout" and you should find some good examples.