Animating a Floating Div

I'm trying to achieve the effect of a horizontal accordion using exclusively CSS for animations and layout. So I have 4 columns set up and the main difference with a classic accordion is that when I click on a column, instead of expanding in one direction, it should expand in both directions and push the other columns left and right.

Here's a compact version of my code right now : http://jsfiddle.net/4ZGmj/183/

If you click on the red column, it works exactly as intended: the column is expanded in both directions and all other columns are pushed to the right. Now if you click on the green column, you'll notice something different: the column expands in both directions as intended, but it only pushes columns to the right while overlapping the column to the left. What I would like is for each column to push all neighboring columns when expanded.

I guess it might have to do with the fact that my columns are floated left. Do you guys have any insight on what is causing this behavior and what I can do to fix it ?

Thanks in advance

---

I think your issue may be in the .animate class, where you give it a negative 50px margin. Negative margins overlap the "previous" element (in all directions). If you remove the -50px, the images will only "flow" to the right, since they're "glued" via the float:left property, which will not do what you want anyway :(

I think the way to get around this is by using relative dimensions. Try setting up a div with a fixed width and use relative dimensions (like 25% for each). You probably have to set a behavior on the :not clicked divs aswell.

Like, if one div is ".animated", it has 33% width, while the others would have around 22%... There's probably a better math you can arrange for it, though!

edit: typo