Колонки

Колонки с текстом, картинками… 2 колонки, 3 колонки, 10 колонок.

/*	Columns
------------------------------ */

.columns {  }
.w-5, .w-10 ... .w-100, .w-33, .w-66, .w-38, .w-62 { float: left; overflow: hidden; }

.col-content { padding: 0 6px; }
.col-first { padding-left: 0!important; }
.col-last { padding-right: 0!important; }

.w-5  { width: 5%; }
.w-10 { width: 10%; }
...
.w-95 { width: 95%; }
.w-100 { width: 100%; }

.w-33 { width: 33%; }
.w-66 { width: 66%; }

.w-38 { width: 38%; }
.w-62 { width: 62%; }

Основная обёртка, это:

<div class="columns">
	...
</div>

В класс columns помещаем колонки. Шаблон одной колонки:

<div class="w-xx"><div class="col-content">
	<p>Содержимое...</p>
</div></div>

Где вместо w-xx подставляем нужный класс ширины в процентах.

Общий шаблон колонок выходит таким:

<div class="columns">
	<div class="w-33"><div class="col-content col-first">
		<p>Содержимое...</p>
	</div></div>
	<div class="w-33"><div class="col-content">
		<p>Содержимое...</p>
	</div></div>
	<div class="w-33"><div class="col-content col-last">
		<p>Содержимое...</p>
	</div></div>
</div>

Строчка:

.col-content { padding: 0 6px; }

Регулирует расстояние между колонками.

Классы для первой и последней колонок:

.col-first { padding-left: 0!important; }
.col-last { padding-right: 0!important; }

Убирают левый и правый отступы для улучшения визуального восприятия.