CSS3: Floating first div between second and third

Question

Should be a simple solution to this:

I have the divs in the following order:

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

I HAVE to have them in this order. Using floats, how can I get the first div ("middle") to fall in between the second divs.

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

I've tried doing float:left; on the middle:

[[middle] right] [left]

and then float:right; on the top cluster:

[left [[middle] right]]]

but it shows up 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;
}

Check this http://jsfiddle.net/8amez/

Answer 2

If you are, indeed, able to add a wrapper div element, then this works (insofar as your simple example) at JS Fiddle:

​#left {
    float: left;
}

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

​#wrap #middle {
    float: left;
}

#wrap #right {
    float: right;
}​

Given the following HTML:

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

Bear in mind, though, that this is likely to be fairly fragile; and would be better achieved by re-ordering your mark-up, or, if that can't be changed server-side, or in the HTML, using JavaScript to move things around, for example:

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

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

JS Fiddle demo.