Резиновая по ширине верстка

В этом посте будет описано как сделать резиновую по ширине верстку. Будут примеры двухколоночных и трехколоночных дизайнов

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

<div class="main">
	<div class="maincontent">
		правая колонка
	</div>
</div>
<div class="sidebar">
	левая колонка
</div>
<div class="clear"></div>

.clear {
	clear:both;
}
.main {
	float:right;
	width:100%;
	margin-left:-250px;
	background:blue;
}
.maincontent {
	margin-left:250px;
}
.sidebar {
	float:left;
	width:250px;
	background:red;
}

Как это будет выглядеть можно увидеть на скриншоте:

Вот и все. Для нагладности у колонок сделан красный и синий фон

Теперь поменяем местами сайдбар и основную колонку. Изменения нужно производить только в файле стилей

.clear {
	clear:both;
}
.main {
	float:left;
	width:100%;
	margin-left:-250px;
	background:blue;
}
.maincontent {
	margin-left:250px;
}
.sidebar {
	float:right;
	width:250px;
	background:red;
}

Следующим нашим шагом будет верстка резинового трехколоночного дизайна

<div class="sidebarleft">
	левая колонка
</div>
<div class="sidebarright">
	правая колонка
</div>
<div class="main">
	центральная колонка
</div>
<div class="clear"></div>

.clear {
	clear:both;
}
.sidebarleft {
	float:left;
	width:250px;
	background:red;
}
.sidebarright {
	float:right;
	width:250px;
	background:green;
}
.main {
	background:blue;
	margin:0 260px;
}