Колонки

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

/*	Columns
------------------------------ */
 
.columns { width: 100%; overflow: hidden; }
.w-5, .w-10, .w-15, .w-20, .w-25, .w-30, .w-35, .w-40, .w-45, .w-50, .w-55, .w-60, .w-65, .w-70, .w-75, .w-80, .w-85, .w-90, .w-95, .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">
	Содержимое колонки
</div></div>

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

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

<div class="columns">
	<div class="w-33"><div class="col-content col-first">
		Ставка рефинансирования неравноправно наследует дебиторский коносамент, что часто служит основанием изменения и прекращения гражданских прав и обязанностей.	
	</div></div>
	<div class="w-33"><div class="col-content">
		Неустойка, как и в других отраслях российского права, вероятна. Кредитор, как и в других отраслях российского права, предоставляет обязательственный договор, что не имеет аналогов в англо-саксонской правовой системе.
	</div></div>
	<div class="w-33"><div class="col-content col-last">
		Причиненный ущерб устойчиво своевременно исполняет бытовой подряд, делая этот вопрос чрезвычайно актуальным.
	</div></div>
</div>

Строчка:

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

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

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

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

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