問題使用內部的2個部分<footer>元素

Question

我試圖在我的<footer>元素內部有2個部分。

我的第一部分我想要有一些內容的列。 （它可以罰款）

我的第二部分我想在第一部分下面，我想有一個黑色的背景，並在左邊對齊一段。

我想盡我所能，但它不能正常工作。

您是否看到我的代碼中可能出現錯誤？具有這種

林：

但是我試着這樣：

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

基本上你的花車沒有清理。

所有你需要知道的花車：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; 
} 

Answer 2

<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