如何让我的浮动div在主流浏览器中看起来一致？

Question

我正在尝试为自己投放一个投资组合网站，但我刚刚开始在其他计算机上进行测试。今天我注意到一些浮动的div在IE和Firefox中被错误定位的问题。

Chrome看起来正确，左图，互联网资源管理器右图

浮动的div是.projects定义如下：

.project {
    margin: 2.5em 1.5em 0 0;
    width: 30%;
    float: left;
}

据我所知，项目可能会有不同数量的文字和略有不同的图像尺寸，这可能是原因，但我不知道如何确保Chrome中的一致定位？

随意在浏览器中摆弄实际网站：www.holly.im

感谢任何帮助！

....我真的应该问这是一个单独的问题，但我也可以在这里提一下 - 我在Firefox的页面内容下面有很多额外的空间，我可以向下滚动到普通的灰色一段时间我不太明白，因为我的大部分网站内容都存在于#pages div中，firebug突出显示告诉我应该在哪里结束。认为值得一提吗？但我可能会发一个单独的问题。

Answer 1

您需要在第三个clear:left之后添加.project或在.project div上设置固定的高度。

当你的第二个标题更长时，它会导致下面一行的浮动div在它后面堆叠，这会将最后两个推到一行