CSS3 translate issue Overflow

Question

First of all, here is a jsfiddle to illustrate my issue : http://jsfiddle.net/EKxkx/ I don't know why on jsfiddle, the css translate is only working on chrome, but on the live version the issue is only visible under firefox as shown here : http://helveticventure.com/startupweekend/v4/test.html

I'm using the ez-css framework (ez-css.org). With the following layout :

----------
|   1    |
----------
|   |    |
| 2 |  3 |
|   |    |
----------
|   4    |
----------

When I put a -webkit-transform: translate(0, 30px); to both the block 2 and 3, they don't behave the same way.

The block 3 is moving under the block 4 when the block 2 is moving above the block 4. The behavior I want to archive is the on used by block 3. Both block moving below the block 4. But I really don't know how.

Thanks for your help!

Eric

Answer 1

Fabrizio Calderan's answer worked perfectly!

http://jsfiddle.net/kXySp/

I've added :

.ez-last{
  overflow:hidden;
}
.ez-fl{
  overflow:hidden;
}

And know the bloc 2 is moving below the block 4.

Eric