CSS3: Flotante primera div entre el segundo y tercer

Question

debe ser una solución simple a este:

tengo los divs en el siguiente orden:

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

tengo que tener en este orden. Usando flotantes, ¿cómo puedo obtener el primer div ("middle") entre los segundos divs.

Cada div tiene una altura de conjunto y un ancho establecido (en px).

He intentado hacer float:left; en el medio:

[[media] derecha] [izquierda]

y luego float:right; en el grupo superior:

[ left [[middle] right]]]

, pero se muestra como

[medio] [izquierda] [derecha]

Cualquier ayuda?

EDIT: esta es la fuente de corriente:

http://pastebin.com/sjiw9PLn

http://pastebin.com/NMsWk1nZ

Answer 1

se puede escribir así:

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

Marque esta http://jsfiddle.net/8amez/

Answer 2

Si se ajustan anchuras y alturas, utilice el atributo css:

position:absolute; 

y jugar con:

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

Answer 3

Si usted es, de hecho, capaz de añadir un elemento contenedor div, entonces esto funciona (en la medida en que su ejemplo sencillo) en JS Fiddle:

​#left { 
    float: left; 
} 

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

​#wrap #middle { 
    float: left; 
} 

#wrap #right { 
    float: right; 
}​ 

Dado el siguiente código HTML:

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

Tenga en cuenta, sin embargo, que esto es probable que sea bastante frágil; y que pueden lograrse mejor por la re-ordenar su margen de beneficio, o, en caso de que no se puede cambiar en el servidor, o en el HTML, utilizando JavaScript para mover las cosas, por ejemplo:

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

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

JS Fiddle demo .

Answer 4

Suponiendo que TIENE que ser en este orden para que alguna herramienta de raspado agarre el código confiando en que es así, ¿por qué no simplemente agrega un poco de JavaScript para mezclarlos después de que la página se haya cargado?