float div的大小不适合他的内容

Question

我的当前项目有问题。我正在设计一张扑克牌桌。

我的游戏桌上有两个区域，一个用于玩家1放置他的游戏，另一个用于玩家2放置他的游戏。

玩家可以拥有很多游戏，我需要在相应的玩家区域中分别展示这些游戏。

在我的html中，我有一个代表该玩家区域的div，其中有一个名为“canasta”的类。

问题在于我需要将卡片放在另一张上面，为此，我使用“margin-left：-50px”。 这个边距会减少父div的大小，对吧？但这种情况并没有发生。

然后，“canastas”在他们之间有这个空白。

我的“canasta”类使用此css属性：

display: inline-block;
float: left;

有人可以帮助我吗？

所有源代码的链接： https://drive.google.com/folderview?id=0B5GEKEMzvk0nbVlSb2FscFl2cE0&usp=sharing

发生的事情的一个例子： http://jsfiddle.net/dzf49ycd/

谢谢， Renan的。