Жидкие колонки CSS, фиксированные поля; святой грааль святых граалей

Обновление и резюме

Я чувствую себя обязанным сделать этот вопрос более ясным, теперь, когда есть вознаграждение.

(Кроме того, я уверен, что это будет детской забавой, когда calc() CSS3 единичное значение будет поддерживаться, делая что-то вроде width: calc(25% - 5px); хотя мы, вероятно, будем просматривать интернет в уме к тому моменту)

Я работаю над CSS фреймворком для нескольких проектов, которые имеют общие требования к дизайну; а именно, плавный 12-колоночный макет. Используя плавающие элементы .column с процентной шириной (100% / 12) x col_size, это достаточно просто. Однако проблема возникает при добавлении фиксированных полей (или любой формы интервала) между колонками.

Моя первая попытка использовала текучие колонки, как описано, с дочерней .панелью, вложенной в каждую. HTML/CSS сниппет следует ниже (сокращен для краткости):

.column{
    float: left;
    display: inline-block;
}

.width-01{ width:  8.3333%; }
.width-02{ width: 16.6666%; }
.width-03{ width:      25%; }
/* etc */

.panel{
    width: 100%;
    padding: 5px;
    box-sizing: border-box; /* so padding doesn't increase width */
}

    
Width-02


    
Width-03


    
Width-02


    
Width-05

Этот сниппет создал бы макет, подобный тому, что показан на изображении ниже, однако все элементы .panel имеют 5px отступы со всех сторон. Я пытаюсь сделать так, чтобы край содержимого внешних колонок был вровень с краем окна просмотра (или родительского контейнера, если на то пошло). Другой подход заключается в полном исключении класса .panel и использовании только columns:

.column{
    float: left;
    display: inline-block;
    padding-left: 10px;
    box-sizing: border-box;
}

.column:first-child{ padding-left: 0px; }

.width-01{ width:  8.3333%; }
.width-02{ width: 16.6666%; }
.width-03{ width:      25%; }
/* etc */

Width-02
Width-03
Width-02
Width-05

Опять же, это работает хорошо, давая результаты, близкие к тем, что показаны на рисунке ниже, однако теперь (фактическая) проблема заключается в том, что padding съедает ширину колонок, испортив распределение ширины. Колонка :first-child имеет на 10 пикселей (или любой другой размер поля) больше ширины области содержимого, чем ее братья и сестры.

Это может показаться безобидным, даже незаметным; однако есть несколько случаев, когда точное (настолько точное, насколько это возможно) распределение ширины между элементами либо необходимо, либо вообще облегчит работу.

И так, используется ли padding, margin, или какая-то их комбинация; есть ли какое-нибудь решение для текучих колонок, фиксированных полей, с равномерным распределением пространства водостока, которое не будет отнимать "маргинальную" (***хаха*) область содержимого у соседних колонок?**

---

Оригинальный вопрос

Из-за простого отсутствия результатов в моих поисках и попытках, я пришел к выводу, что это невозможно. Однако если где-нибудь и можно найти ответ, то, я уверен, здесь.

Есть ли способ, используя чистый CSS, добиться плавного расположения колонок с фиксированной шириной полей?

Важное замечание: Этот рисунок - лишь пример, а не конкретный макет, которого я хочу добиться. Данное решение должно допускать любую комбинацию смежных колонок, при этом общее распределение ширины не должно превышать 12. Для примера можно рассмотреть популярную сетку 960.)

Примечание: В 12-колоночном макете распределение ширины колонок на изображении составляет 2, 3, 2 и 5 соответственно.

До сих пор я прибегал к сетке, которая, используя проценты, почти достигает этой цели. Проблема в том, что для достижения полей каждая колонка требует дополнительного дочернего элемента (я называю их . panel) с:

width: 100%;
box-sizing: border-box;
padding: 10px;

Это, опять же почти, прекрасно; проблема в том, что первый и последний столбец имеют внешние "поля" (10px), а "поля" между каждым столбцом удваиваются (2 x 10px)

Конечно, с включением нового CSS3 calc() типа значения, это можно было бы решить гораздо проще. Что-то в направлении:

.width-12 > .panel{ width: 100%; }
.width-09 > .panel{
    width: calc(75% - 10px);
    margin: ...;
}

У меня есть некоторые исправления Javascript, я взломал некоторые вещи, которые "работают", но я нахожусь в поиске. Надеюсь, что святейший из граалей существует.

Следующее решение и то, которое предоставил @avall (хотя, конечно, это хороший выбор для упрощения), к сожалению, не то, что я ищу. Основная проблема в том, что поля не распределены равномерно между колонками.

Единственный способ, который я вижу, это уменьшить .panel padding до 5px и что-то вроде:

.column:first-child > .panel {
    padding-left: 0px;
}

.column:last-child > .panel {
    padding-right: 0px;
}

/* not necessary? in any case, haven't tested */
.column:only-child > .panel {
    padding-right: 0px;
    padding-left: 0px;
}

Это решение неприемлемо только потому, что IE8 не распознает псевдоселекторы :last-child (и, если уж на то пошло, :only-child).