2行内块div不会排队时总宽度为100％

Question

我有2个div在宽度为15％，另一个在85％宽度（总共100％）设置为内联块与浮法：左和a浮动：将它们保持在两侧的权利。

但是，当实践中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

Answer 2

在盒模型宽度内，如果你添加填充使你的元素是大然后15％。您可以修复使用：

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

JSFIDDLE