Html 使用内部的两个部分发布<；页脚>；要素

我试图在我的

元素中包含两个部分

我的第一部分我想有一些内容的专栏。（罚款）

我的第二部分我想在第一部分的下面，我想有一个黑色的背景，在左边对齐一段

我想我做的一切都很好，但工作不正常

你看到我的代码中有什么错误了吗

我有这个：

但我正在尝试：

<footer id="footer-container">
    <section id="footer">
         <div id="col" >
            <h1>Title of my column 1</h1>
            <p>Content of col 1</p>
        </div>
         <div id="col" >
            <h1>Title of my column 2</h1>
            <p>Content of col 2</p>
        </div> 
         <div id="col" >
            <h1>Title of my column 3</h1>
            <p>Content of col 3</p>
        </div> 
    </section>
  <section id="footer2">
        <p>&copy; I want copyright float at left in section 2</p>
    </section>
  </footer>

#footer-container
{
    width:100%;
    height:auto;
    float:left; 
    background:gray;
} 

#footer
{
    width:960px;
    margin:0 auto 0 auto;
}

#col
{
    float:left;
    margin-right:40px; 
    margin:10px 53px 10px 0;
    width:200px;
}

#col h1
{
    color:#fff; 
    font-size:17px;
    font-weight:bold; 
    margin-bottom:10px; 
}

#col p
{

    color:#ccc; 
    font-size:14px; 
    margin-bottom:10px;
}  


#footer
{
    width:960px;
    margin:0 auto 0 auto;
    background:#000;
    height:100px;
}

我的JSFIDLE有问题，我有：

我的html:

<footer id="footer-container">
    <section id="footer">
         <div id="col" >
            <h1>Title of my column 1</h1>
            <p>Content of col 1</p>
        </div>
         <div id="col" >
            <h1>Title of my column 2</h1>
            <p>Content of col 2</p>
        </div> 
         <div id="col" >
            <h1>Title of my column 3</h1>
            <p>Content of col 3</p>
        </div> 
    </section>
  <section id="footer2">
        <p>&copy; I want copyright float at left in section 2</p>
    </section>
  </footer>

#footer-container
{
    width:100%;
    height:auto;
    float:left; 
    background:gray;
} 

#footer
{
    width:960px;
    margin:0 auto 0 auto;
}

#col
{
    float:left;
    margin-right:40px; 
    margin:10px 53px 10px 0;
    width:200px;
}

#col h1
{
    color:#fff; 
    font-size:17px;
    font-weight:bold; 
    margin-bottom:10px; 
}

#col p
{

    color:#ccc; 
    font-size:14px; 
    margin-bottom:10px;
}  


#footer
{
    width:960px;
    margin:0 auto 0 auto;
    background:#000;
    height:100px;
}

---

看看各部分之间的额外div

基本上你的浮动没有被清除

您需要了解的有关浮动的所有信息：

试试这个：

---

您可以在不添加额外不必要的标记的情况下修复浮动/清算问题。但我花了0.5秒来修复它，这样一个清算部门对于这些问题来说就像一把瑞士军刀。当然存在更好的解决方案，但这是一个快速的解决方案，而且工作正常。非常感谢，您的解决方案工作得很好！你给我的链接对我来说很好，因为有时候我还是会被浮动和溢出弄糊涂！

#footer-container {
    width:100%;
    height:auto;
    background:gray;
}
#footer {
    overflow: hidden;
    width:960px;
    margin:0 auto 0 auto;
}
#col {
    float:left;
    margin-right:40px;
    margin:10px 53px 10px 0;
    width:200px;
}
#col h1 {
    color:#fff;
    font-size:17px;
    font-weight:bold;
    margin-bottom:10px;
}
#col p {
    color:#ccc;
    font-size:14px;
    margin-bottom:10px;
}
#footer2 {
    width:960px;
    margin:0 auto 0 auto;
    background:#000;
}
#footer2 p {
    padding: 2em 0;
    color: white;
}