将Div划分为Div，CSS

Question

我确定我在这里遗漏了一些东西...所以我尽可能地愚蠢地解决了我的问题所以它是有道理的。 （我在使用CSS方面有点新手。）

为了澄清，我制作了一张图片，显示了我想要完成的事情，但我似乎无法做到正确而且我一整天都在努力。我需要一个100％宽的标题div，中间的内容和100％宽的页脚div。我的页脚div继续在我的内容区域后面。 CANT弄清楚了。

<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>

我还包括一个小提琴： http://jsfiddle.net/b9kah2wx/

谢谢！

Answer 1

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

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

注意：按照Paulie_D提到的那样清除你的花车非常重要

Answer 2

我对你的jsfiddle http://jsfiddle.net/b9kah2wx/2/

进行了一些更改

#HEADER {
    height:300;
    width: 100%;
}
#CONTENT {
    background-color: #C0F;
    height:auto;
    width: 100%;
}
#FOOTER {
    background-color: #C00;
    height:500px;
    width: 100%;
}
#contentwrap {
    width: 66%;
    height: auto;
    margin: 0 auto;
    background-color:#0ff;
}
#top-left-photo {
    float:left;
    height: 180px;
    width: 40%;
    margin-right: 15px;
    background-color: #555555;
    font-family:"Dirty";
}
#top-right-date {
    float:left;
    height: 180px;
    width: 40%;
    margin-right: 0px;
    background-color: #555555;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

您会注意到我已将固定宽度更改为百分比，因此我可以在jsfiddle中使用它，但基本的想法就在那里。

您还需要清除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>