Как выровнять 2 divs (каждый из них имеет собственную прокладку) рядом друг с другом?

Question

С прокладкой закомментированного, как показано на рисунке, сайт работает, как я ожидал (2 ДИВ столбцы рядом друг с другом.

Однако, когда я добавить отступы в #right DIV сдвигается вниз. Как бы я заставить его работать как задумано с прокладкой

HTML: Две дивы, содержащиеся непосредственно в теле

CSS:

#left { 
    background-color: green; 
    float: left; 
    margin-top: 0px; 
    width: 70%; 
} 

#right { 
    background-color: blue; 
    float: right; 
    margin-top: 0px; 
    width: 30%; 
} 

#left, #right { 
    //padding: 10px; 
    display: inline-block; 
    height: 800px; 
} 

Answer 1

добавить

бокс-проклейки: пограничный ящик;

к вашим divs.

Если вы не дополняющий добавляется вне ширины DIV (или высота) .. такой же, как границы

Отредактировано: и

-webkit-коробчатого размеров: границы коробки; -moz-box-size: border-box;

для совместимости немного больше браузера

Answer 2

если вы используете CSS3, вы можете использовать box-sizing: border-box;

еще, вы можете иметь еще одного ребенка div и применять padding ребенку div вместо родителя div

Answer 3

#left { 
 
\t background-color: green; 
 
\t float: left; 
 
\t margin-top: 0px; 
 
\t width: 70%; 
 
} 
 
#right { 
 
\t background-color: blue; 
 
\t float: right; 
 
\t margin-top: 0px; 
 
\t width: 30%; 
 
} 
 
#left, #right { 
 
\t padding: 10px; 
 
\t display: inline-block; 
 
\t height: 800px; 
 
\t color:#fff; 
 
\t box-sizing: border-box; 
 
\t -webkit-box-sizing: border-box; 
 
\t -moz-box-sizing: border-box; 
 
}

<div id="left"> left </div> 
 
<div id="right"> right </div>