Как предотвратить отбрасывание прокладки от моей ширины DIV?

Question

У меня есть два DIVs, которые я хотел бы укладывать вертикально ...

<div id="searchContainer”>…</div> 
<div id="searchResultsContainer”>…</div> 

У меня есть следующие стили, присвоенные им ...

#searchContainer { 
    padding: 10px; 
    font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; 
    background-color: tan; 
    width: 100%; 
} 

#searchResultsContainer { 
    background-color:cyan; 
    font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; 
    padding: 5px 0px 5px 0px; 
    width: 100%; 
} 

Однако, кажется, что добавление отступы к моему верхнему DIV вызывает его чтобы быть шире, чем DIV ниже. Я хотел бы, чтобы обе DIVs были одинаковой ширины, но я бы хотел, чтобы верхний DIV имел дополнение, чтобы элементы не доходили до границы. Как мне это сделать? Вот сценарий, который иллюстрирует мою проблему - https://jsfiddle.net/1zb5mqmo/.

Answer 1

Использование box-sizing: border-box; на проложенный DIV:

#searchContainer { 
    padding: 10px; 
    font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; 
    background-color: tan; 
    /* max-width: 1000px; */ 
    width: 100%; 
    box-sizing: border-box; 
} 

box-sizing: border-box Свойства ширины и высоты включают заполнение контента и границы

box-sizing: content-box Свойства ширины и высоты включают только содержание

Изменено JSFiddle

Answer 2

В этом случае, просто удалите ширину, и вы можете комбинировать как отступы и границы, не бросать его

#searchContainer { 
 
    padding: 10px; 
 
    font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; 
 
    background-color: tan; 
 
} 
 

 
#searchResultsContainer { 
 
    background-color:cyan; 
 
    font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; 
 
    padding: 5px 0px 5px 0px; 
 
    border: 5px solid steelblue 
 
}

<div id="searchContainer">...</div> 
 
<div id="searchResultsContainer">...</div>