HTML/CSS: Divs с percental width + padding и floating

Question

У меня проблема, и я думаю, что есть общее решение, но я не знал, как правильно его искать. Я хочу, чтобы 2 div плавали рядом друг с другом, оба занимали 50% каждой ширины. Теперь я хочу дать каждому из них некоторое дополнение. Случается, что они обертываются вокруг, а не отображаются рядом друг с другом, потому что теперь они больше 50%. Что тут взломать?

некоторый код:

#nw_main_line1_l { 
     height: 512px; 
     width: 50%; 
     float: left; 
     padding-right: 11px; 
     background-color: red; 
    } 
    #nw_main_line1_r { 
     height: 512px; 
     width: 50%; 
     float: left; 
     padding-left: 11px; 
     background-color: green; 
    } 

Что здесь происходит, что зеленый один находится ниже красного. Если я удалю paddings, все будет хорошо, и они будут плавать, как исключено.

вид приветствия

Answer 1

Это из-за обивки. Вы можете либо уменьшить ширину или использовать современный способ с:

* { box-sizing: border-box; } 

Больше информации on box-sizing here.

Answer 2

Вы в основном нашли ответ на проблему самостоятельно, но явно не назвать. Удаление исправления устраняет проблему. И если вы обменяете прокладку на границу (или используйте оба), вы заметите, что ящики снова сломаны.

Это связано с тем, что по крайней мере в блочной модели Firefox»результирующая ширина коробки (например, из дел) будет

2 * [Border-Width] + 2 * [Padding-Width] + width 

Может быть, вы можете использовать CSS3 flexible boxes удобно обойти проблему.