css - 当总宽度为 100% 时，2 个内联 block div 不会对齐

Question

我有 2 个 div，一个宽度为 15%，另一个宽度为 85%(总计 100%)设置为内联 block ，带有 float:left 和 float:right 以将它们保持在两侧。

但在实践中，85% 的 div 会出现在 15% div 的下方，并且有一些重叠。下面的链接准确地显示了我是如何设置它的。我需要它们彼此完美相邻，占用 100% 的容器。

https://jsfiddle.net/6favu1gr/1/

我的CSS:

#main_cont {
   position: absolute;
   width: 100%;
}

#sidenav {
    display: inline-block;
    float:left;
    padding: 15px;
    width:15%;
    background-color: #130103;
    -webkit-box-shadow: inset 0px 0px 5px 5px rgba(38,2,6,1);
    -moz-box-shadow: inset 0px 0px 5px 5px rgba(38,2,6,1);
    box-shadow: inset 0px 0px 5px 5px rgba(38,2,6,1);
    border: 1px solid #938082;
}

#main {
    display: inline-block;
    float:right;
    padding: 15px;
    text-align: center;
    width:79%;
    background-color: #130103;
    -webkit-box-shadow: inset 0px 0px 5px 5px rgba(38,2,6,1);
    -moz-box-shadow: inset 0px 0px 5px 5px rgba(38,2,6,1);
    box-shadow: inset 0px 0px 5px 5px rgba(38,2,6,1);
    border: 1px solid #938082;
}

我试过较小的 %，但是当减小窗口大小时它们再次重叠。

Answer 1

您有未考虑的填充。解决它的一种方法是设置 box-sizing到边框:

#main, #sidenav {
    box-sizing:border-box;
}

jsFiddle example