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/