Как рассчитать сетку с помощью calc()?

Question

[freeman0204]

Хочу создать сетку на основе calc(). Есть такой шаблон screenshot.ru/1e72914db1c1b14fb8eeace109f05b71
ширина 940px. Ширина левой колонки 18% средней 55% и правой 24% в сумме 97%. (Такие проценты взяты на основе того влазит ли контент в контейнер). Остается по идее 3% на отступы т.е по 1.5% на каждый из двух.
Как прописать это в формуле calc(). (Также видно что межу колонками, есть 2 бордера слева и справа, которые занимают 1px)

Answer 1

[littleguga]

Может так?
full size

Comments

[freeman0204]

Да, думаю так спасибо! Только не пойму почему у вас вместо бордеров созданы дополнительные дивы?

[littleguga]

Артур Черешнюк: для наглядности, иначе бы они прилипали к main. Можно так

[Александр Талалаев]

littleguga: я бы эти линии вообще вывел бы из потока блоков, возможно с помощью псевдоэлементов, чтобы не мешались.

[littleguga]

Александр Талалаев: можно и так, много вариантов.

Answer 2

[VA_ic2b]

Проще в расчетах вашего макета использовать css box-sizing : border-box
Почитайте например : htmlbook.ru/css/box-sizing

Comments

[freeman0204]

У меня он прописан * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
дело в том что если писать в px то все сходится а если в % то сложновато переводить.

[VA_ic2b]

свойства padding, border внутри блока рассчитывать не нужно - border-box четко выдержит указанную вами width в %