浮动容器重叠底部div,但不是顶部

Question

嘿,我对这个结构有点不确定.基本上我想要一个有4个div.

<div class="container">
    <div class="top-border"></div>
    <div class="box"></div>
    <div class="bottom-border"></div>
</div>

容器装有三个较小的div.我的目标是让盒子div保持内容,并且边框divs在盒子周围创建一个括号.边框顶部将浮动到左侧,边框底部将浮动到右侧.唯一的问题是容器与底部支架重叠,但不与顶部重叠.我也不希望它重叠......有没有办法解决这个问题？

这是一个JsFiddle:http://jsfiddle.net/6ghzN/

Answer 1

在底部边界div上,改变

margin-top: -40px;

至

margin-bottom: -8px;