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