Эта страница является примером: то, что вы читаете, находится в центре трех областей, расположенных рядом в теле страницы.

Промежуток — это разделитель

Между двумя областями ничего не нарисовано. То, что отличает их, — это пространство, которое они оставляют между собой, через которое страница показывает — тот же фон, на котором стоят меню и заголовок. Каждая область имеет свой собственный фон, который всегда был у тела.

Каждая по отдельности

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

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

Изменение размера одной из них

Область слева имеет `zone-resizer`: ручку, заполняющую промежуток рядом с ней, которая ничего не рисует — курсор говорит, что она двигается. Перетащите её или наведите на неё фокус и используйте стрелки; двойной щелчок возвращает области ширину, которую ей дала страница.

Ручка изменяет размер области, которая имеет размер — ту, которой задана ширина, а не ту, которая занимает оставшееся пространство — и гибкая рядом с ней поглощает разницу. Ширина запоминается под именем области, поэтому она возвращается вместе со страницей, здесь на всех трех макетах, так как это одна и та же область, перемещающаяся.