2 колонки с границами сворачиваются при уменьшении масштаба с помощью браузера

Question

Итак, у меня есть 2 колонки, которые структурированы примерно так:

HTML структура:

#container
  #content
  #side-a
  .janitor

CSS:

#container{ width: 501px; }
#content { 
  float: left; 
  width: 300px;  
  border-right: 1px solid black;
}
#side-a{
  float: right;
  width: 200px;
}
.janitor {clear: both; }

Когда нет рамки, все в порядке, но когда я ее добавляю, компоновка рушится при уменьшении.

Answer 1

Это потому, что ширина границы добавляется к указанной вами ширине содержимого.

#content - это 300px, #side-a - это 200px - это всего 500px. #container - это 501 пикселей. Без границ у вас еще 1 пиксель, НО ...

При добавлении границы, даже 1 пикселя, получается #content 300 пикселей + 2 пикселя в ширину #side-a 200 пикселей + 2 пикселя в ширину. Я удивлен, что он не падает при увеличении.

Это можно исправить с помощью:

box-sizing: border-box;

(с соответствующими префиксами поставщика).

Answer 2

Идеальное решение: Не используйте поплавки для этого типа расположения столбцов.В любом случае вы используете контейнер фиксированного размера 501 пикселей;поэтому динамическое плавание не требуется: просто укажите позиции явно, то есть, если высота определена правильно.Альтернативно - да, действительно - используйте таблицу (или css's display: table, если вам нравится семантическая чистота), которая естественным образом реализует столбцы.

Что касается специфики вашего вопроса: у вас 1px границы и 200px+ 300px контента, который может показаться в сумме до 501px - т.е. он должен соответствовать.Однако браузеры не могут вычислить ширину с произвольной точностью;они округляются до некоторой внутренней точности - и особенно при увеличении, эта точность вполне может быть связана с пикселями устройства, а не с пикселями CSS: и если при округлении возникает немного дрожания, сумма 1 + 200 + 300 может быть немногобольше или чуть меньше 501, и, следовательно, неожиданно перестает вмещать компоновку в контейнер 501px.Вот почему вы, вероятно, никогда не должны использовать этот стиль CSS-кодирования - он очень специфичен для устройства и браузера и может сломаться без предупреждения из-за небольших изменений.Готов поспорить, что ваш макет не нарушается при увеличении во всех браузерах ...