Html 将Div居中放置在Div中，CSS

我肯定我错过了一些东西。。。所以我尽可能地简化了我的问题，这样才有意义。（我在正确使用CSS方面有点新手）

为了澄清这一点，我制作了一张图表，显示了我正在努力完成的目标，但我似乎做得不对，我已经尝试了一整天。我需要一个100%个大标题，中间的内容和100%个宽页脚。我的页脚div一直在我的内容区域后面。我想不出来

<div id="HEADER"></div>
<div id="CONTENT">
    <div id="contentwrap">
        <div id="top-left-photo"></div>
        <div id="top-right-date"></div>
    </div>
</div>
<div id="FOOTER"></div>

我还包括一把小提琴：

---

谢谢

执行此操作：将以下代码添加到css文件中

* {
margin: 0 auto; /* Centers everything with a given with except when floated or altered with margin and position properties */
}

---

注意：正如Paulie_D所提到的，清除浮动非常重要，我对你的JSFIDLE做了一些更改

您会注意到我将固定宽度更改为百分比，只是为了在JSFIDLE中使用它，但基本思想就在这里

您还需要清除

float:

ed元素，以便解决父

div\contentwrap

高度问题。我已经为您添加了此代码

这是你的HTML

<div id="HEADER"><h1>header</h1></div>
<div id="CONTENT">
    <div id="contentwrap">
        <div id="top-left-photo">photo</div>
        <div id="top-right-date"> date</div>
        <div class="clearfix"></div>
    </div>
</div>
<div id="FOOTER"></div>

标题
照片
日期

您还需要清除浮点数。

<div id="HEADER"><h1>header</h1></div>
<div id="CONTENT">
    <div id="contentwrap">
        <div id="top-left-photo">photo</div>
        <div id="top-right-date"> date</div>
        <div class="clearfix"></div>
    </div>
</div>
<div id="FOOTER"></div>