• 20.01.2012
  ||
• Нет комментариев
  ||
• CSS

Периодически при верстке сайтов возникают задачи которые требуют нестандартной верстки колонок. Стандартным способом я называю способ “плавающих” блоков.

Традиционный способ

<div class="grid">
	<div class="col"></div>
	<div class="col"></div>
</div>

grid – контейнер колонок, одновременно это решение проблемы схлопывания, contain float
col – колонка.

.grid {
	*zoom: expression(this.runtimestyle.zoom=\"1\", this.appendchild(document.createelement(\"br\")).style.csstext=\"clear: both;
	font: 0/0 serif");
	*zoom: 1; }

	.grid:before,.grid:after {
		content: "";
		display: table; }

	.grid:after { clear: both; }

	.grid .col {
		float: left;}

Я привожу только стили показывающие механизм, и опускаю не принципиальные штуки, типа ширины и тд.
Интересный пример верстки плавающими боксами – inuit.css и стоит обратить внимание как обойдена проблема обнуления правого отступа у последней колонки.

Колонки инлайновыми блоками

<div class="grid-inline">
	<div class="col"></div>
	<div class="col"></div>
</div>

.grid-inline {
	letter-spacing: -.31em;
	word-spacing: -.43em;
	position: relative; }

	.grid-inline .col {
		display: inline-block;
		letter-spacing: normal;
		word-spacing: normal;
		vertical-align: top;}

.ie7 .grid-inline .col { display: inline; }

пример

Проблема с инлайновыми блоками в том что между ними есть зазор величиной с пробел текущего шрифта, аналогично пробелу между словами, поэтому при помощи letter-spacing: -.31em; этот пробел обнуляется. Возможным минусом этого метода может быть то, что у какого-то шрифта этот пробел не будет равным 0.31em, но в любом случае можно либо подобрать нужное значение либо для грида использовать какой то другой шрифт.

word-spacing: -.43em; – это тоже лечение только для Opera.

Плюс этого метода в том что не надо бороться с обрыванием float.

Метод Чикуенка

Не знаю насколько этот метод правомочно называть методом Чикуенка ), но впервые я прочел о нем в его статье Вёрстка растягивающихся сайтов. Понял я его не сразу и пришлось какое то время чесать репу и экспериментировать, и хотя я его не использую часто но он очень интересный и решает кое какие проблемы. Обьяснять его я не буду, лучше всего для этого почитать его в оригинале, тем более что в нем есть важные детали которые надо понять прежде чем использовать. Приведу только кратко пример.

<div class="page grid">
	<div class="col content"></div>
	<div class="col leftbar"></div>
	<div class="col rightbar"</div>
</div>

.col {
	float: left;
	position: relative;
	margin-right: -100%; }

.page {
	width: 50%;
	margin: auto; }

.content { width: 100%; }

.leftbar {
	width: 40%;
	left: -40%; }

.rightbar {
	width: 40%;
	left: 100%; }

.ie7 .content,
.ie7 .leftbar,
.ie7 .rightbar {
	padding: 0px;
	border: 0; }

пример

Главное тут, на что надо обратить внимание для того чтобы понять, это стили col.
float: left – “вынимает” блок из потока.
margin-right: -100% – “затягивает” соседний блок так что он оказывается в “нуле” относительно родительского блока. А дальше из этой точки блоки расставляются в нужное место свойством left.

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

Это не все прелести метода, остальное стоит почитать в оригинальной статье.

Имитация абсолютного позиционирования

Нечто похожее на предыдущий метод но с той разницей что изначально блоки ставятся в правый верхний угол а потом возвращаются на свои места. Этот метод подробно описан в статье Faux Absolute Positioning.

<div class="grid">
	<div class="content col"></div>
	<div class="leftbar col"></div>
	<div class="rightbar col"></div>
</div>

.col {
	float: left;
	position: relative;
	left: 100%; }

.content {
	margin-left: -80%;
	width: 56%;
	padding: 2%; }

.leftbar {
	width: 16%;
	padding: 2%;
	margin-left: -100%; }

.rightbar {
	width: 16%;
	padding: 2%;
	margin-left: -20%; }

примерпримерпримерпример

Проблема с этим способом та же что и с предыдущим – зазоры между колонками которые появляются из за округления процентных значений. Зазоров нет только в Firefox.

Решается это созданием дополнительной обертки для контейнера колонок