Html 调整div大小（包括边框底部），以在调整浏览器大小时适合其他框

这是我的第一个问题，我对这个问题很陌生，所以请原谅我的无知

我正在创建一个网站，页脚位于

div

中，底部为

边框。页脚中有两个
div
，每侧一个。在浏览器中调整窗口的大小时，右栏移动到左栏下方。没关系，但是
边框底部
正好穿过
div
。
我尝试了
位置：相对
和
绝对
和
溢出
和无

这是简化的代码：

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

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

为什么使用带有类名“footer”的
div
，而不是只使用
标记？边框保持在footerleft和footerright的顶部，这是我所期望的。您希望它看起来怎么样？请更好地解释以帮助您。