Divs need to be in each corner of the page without overlapping?

I'm trying to make 4 divs in each corner of the page. I've managed to do it, but when I resize the window the divs overlap eachother, this is because the bottom divs are stuck to the bottom of the window, I just w开发者_高级运维ant the divs to be at the bottom of the "#wrap" div, but I'm really struggling to do it :/

In Internet Explorer all the divs are all a bit messed up as well...

Here's a live preview of it so you can see the code/page: enter link description here

Any help is appreciated :)

You can't stop users from resizing their browsers or using ancient resolutions.

The best you can hope for is to set a min-height/width on .wrap