在<footer>元素</footer>中使用2个部分的问题

Question

我试图在<footer>元素中包含2个部分。

我的第一部分我希望有一些内容列。 （其罚款）

我的第2部分我想要在第1部分下面，我想要一个黑色背景，左边有一个段落。

我认为我做的一切都很好，但它无法正常工作。

你看到我的代码中出现了什么问题吗？

我有这个：

但我正在尝试这个：

我的jsfiddle 有问题我有：

http://jsfiddle.net/ra3zc/1/

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

我的css：

#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;
}

Answer 1

<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>
<div class="clear"></div>
  <section id="footer2">
    <p>&copy; I want copyright float at left in section 2</p>
</section>
</footer>

加：

.clear {clear: both;}

查看各部分之间的附加div

Answer 2

基本上你的花车没有清理。

您需要了解浮标的所有内容：http://css-tricks.com/all-about-floats/

试试这个：
http://jsfiddle.net/ra3zc/2/

#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;
}