Html 底部边框不覆盖顶部边框

我正在为屏幕构建一系列选项卡，左边的div与右边的div在上边框方面的行为不同

我有一个无序列表（ul）在两个div的顶部，这两个div并排排列，充当两列。为了辅助演示，我在两个div的顶部加了一个边框，让用户感觉这就是内容。为了更好地帮助演示，我将活动选项卡的底部边框设置为白色，这样选项卡下方就没有边框了&选项卡和内容区域是同一个空间。我遇到的问题是，选项卡的底部边框会覆盖右列，但不会覆盖左列，但在右侧，顶部会覆盖底部

您必须调整屏幕大小以使屏幕显示问题，因为其中一个要求是有一个扩展的右列

我在IE、Chrome和FF中尝试过这一点&它们都显示相同的东西。左列有一个左浮动，所以它可能与此有关，但我不知道是什么

更新了JSFIDLE：

您没有浮动两列，这是主要问题：

   .column_container_left {
        float: left;
        width: 200px;
        border-top:thin solid grey;                    
        border-bottom:thin solid grey;    
        border-left:thin solid grey;
        background-color: white;
        height: 500px;
    }

    .column_container_right {
        float: left;
        width: 200px;
        border-top:thin solid grey;                    
        border-bottom:thin solid grey;    
        border-right:thin solid grey;
        background-color: white;
        height: 500px;
    }

---

您可以将无序列表的position属性设置为relative，以便将其放置在堆栈中更高的位置。这是小提琴

---

我还建议将边框从a元素移动到其父li元素，并将两个较低的div包装在一个具有完整边框的div中。

感谢您的输入，不幸的是，这破坏了我的自动扩展右栏，这对于我的页面来说是必要的。然后从column\u container\u right元素中删除width属性。无论哪种方式，都需要在列_container _right列上使用float:left来修复初始问题。删除width属性会使列收缩。我似乎不能同时满足这两个要求，目前是一个或另一个。你希望你的第一列是固定的，第二列是流动的？是这样吗？你网站的宽度是多少？你可以使用最小宽度/最大宽度或组合来实现你想要的。是的，第一列固定，第二列流体。我用两个重叠的div实现了这一点，一个固定宽度浮动到左边，另一个扩展到页面的宽度，但另一个div的位置有一个左边距。我尝试了使用float属性的max-width和min-width，但是当您浮动div时，它似乎会收缩。