CSS3: floating first div between second and third

Question

Should be a simple solution:

I have divs in the following order:

<div id="middle"></div>
<div id="right"></div>
<div id="left"></div>

I have to have them in that order. Using float, how can I get the first div ( "middle") to get between the second divs.

Each div has a set height and a set width (in px).

I tried to do float:left;in the middle:

[[middle] right] [left]

and then float:right;in the upper cluster:

[left [[middle] right]]]

but it displays as

[middle] [left] [right]

Any help?

EDIT: this is the current source:

http://pastebin.com/sjiw9PLn

http://pastebin.com/NMsWk1nZ

Answer 1

you can write like this:

div{
display:inline-block;
}
#left{
 float:left;
}
#right{
 float:right;
}

http://jsfiddle.net/8amez/

Answer 2

div , ( ) JS Fiddle:

​#left {
    float: left;
}

​#wrap {
    width: 80%;
    float: right;
}

​#wrap #middle {
    float: left;
}

#wrap #right {
    float: right;
}​

HTML:

<div id="wrap">
    <div id="middle">middle</div>
    <div id="right">right</div>
</div>
<div id="left">left</div>​​​​​​​​​​​​​​​​​​

, , , ; , HTML, JavaScript , :

var middle = document.getElementById('middle'),
    left = document.getElementById('left');

middle.parentNode.insertBefore(middle,left.nextSibling);​

JS Fiddle demo.

Answer 3

, css:

position:absolute;

:

left: 100px; /* width of the div on the left */

Answer 4

, , , , , JavaScript, .