CSS - 图片和页脚问题

Question

好吧，如果你去这里：http://opportunityfinance.net/Test/2013conf/index.html

你会发现2的布局问题

3个徽标此图片需要低于“金牌” <h4>标签。但由于某种原因，它不会这样做。我已将<div>标记指定为relative的位置，因为其中有其他div需要将图像对齐到底部，并且这样做是正确的，但是，它现在不会低于<h4>Gold</h4>HTML。

下一个布局问题：

我一直在试图像地狱让页面底部的页脚。听起来很简单吧？错误！但是现在我已经知道div在底部了，它似乎正在切断上面的div区域。所以，并不是所有的内容都显示出来。相反，它被推到页脚的下面。我怎样才能解决这个问题？试图把填充，但现在确定在哪里和/或如何？页脚上的页边距似乎也没有做任何事情。

对此非常感谢。我一直在拼命地争取这个简单的布局。这应该是一个流体布局，因为我调整下来的文字作为页面大小调整还，这似乎是完全正常的，除了这两个问题:(

编辑

这里是一个的是什么样子应用容器时，如PIC的div 100像素高度值：

这是给它的<h4>Gold</h4>和3个图像之间空间太大这是ATLEAST在Opera的情况。任何可能的解决方法？

Answer 1

这里有一个

.body { 
    background-color: #FFFFFF; 
    padding: 2em 2em 52px 0; 
} 

修复你有3个标志在一个DIV，在该专区添加的高度，例如

element.style { 
    height: 100px; 
    position: relative; 
    width: 100%; 
} 

非常基本的东西真的，你应该看看clearfix's这里http://css-tricks.com/snippets/css/clear-fix/

当您将float或position:absolute;添加到div时，放弃其reserved空间，以便使家长div认为心不是内部的任何东西，为此没有height，clearfix将解决这些问题对你来说，我之所以说是监守3个标志的都是要么floated或absolute;

这是result我得到