调整浏览器大小时，调整包括border-bottom的div以适合其他框

Question

这是我的第一个问题，我对此非常陌生，请原谅我的无知。

我正在div创建一个带有border-bottom页脚的网站。在页脚中有两个div，每边一个。当我在浏览器中调整窗口大小时，右列在左列下移动。这没关系，但border-bottom正好穿过div。 我尝试使用position: relative和absolute以及overflow而没有尝试。

这是简化的代码：

<div class="footer">

  <div class="footerleft">
    <p>content here with lists and links</p>
  </div> 

  <div class="footerright">
    <p>content here with two more boxes and lists and links</p>
  </div>

</div>

这是简化的CSS：

.footer {
    width: 100%;
    height: 250px;
    clear: both;
    border-top: #fbd1b9 5px solid;
}    
.footerleft {
    float: left;
}    
.footerright {
    float: right;
    margin-right: 40px;
    margin-top: 10px;
}