Правильное отображение резинового шаблона при изменении масштаба?

Question

[Юрий Кириллов]

Суть такая, есть самый базовый макет страницы.
HTML:

...
<div id="body">
     <div id="content">
     Основная часть
     </div>
     <div id="sidebar">
     Колонка
     </div>
</div>

И к нему CSS:

#body { width: 100% }
#content { width: 70%; float: left }
#sidebar { width: 30%; float: left }

Всё работает, но проблема в том, что если в браузере уменьшить масштаб до 90% и меньше, то правая колонка слетает вниз. Есть ли решение для фиксации правой колонки при любых масштабах?

Answer 1

[Миша]

Очень странный баг. В каком браузере это происходит?
Все варианты ниже должны работать.

display: grid

.body { display: grid; grid-template-columns: 3fr 1fr; }
.content { grid-column: 1 / 2; }
.sidebar { grid-column: 2 / 3; }

display: flex

.body { display: flex; }
.content { flex-grow: 3; }
.sidebar { flex-grow: 1; }

display: inline-block

/* Придется убрать отступ между инлайн элементами */
.content { display: inline-block; width: 70%; }
.sidebar { display: inline-block; width: 30%; }

display: table

.body { display: table; width: 100%; }
.content { display: table-cell; width: 70%; }
.sidebar { display: table-cell; width: 30%; }