Резиновый блок без таблицы, только div+css

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

Первое что приходит в голову – это ТАБЛИЦА.

!!! НО

Так как «на дворе» уже почти 2010 год, то стоит соблюдать семантику и таблицы использовать только по-назначению.

Бестабличное решение следующее:

1. Блоку с изображением, допустим, пользователя присваиваем «float: left;» и нужные отступы
2. Рядом создаем блок со следующими свойстваи:

   .stretch {
   	overflow: hidden;
   	zoom:1; /* hasLayout for IE */
   }
   

Кроссбраузерный «display: inline-block;» для любого элемента

Ну ооочень полезный приём.

Меня особенно выручает когда  верстаю какие-либо кастомные кнопко-линки.

.dib {
	display: -moz-inline-stack; /*для мозиллы 2.0*/
	display: inline-block;
	zoom:1; /* hasLayout для IE */
	*display:inline; /* IE6 только после этой строчки начинает корректно отображать свойство display: inline-block; */
}

Несколько вариантов clear-очистки для float-элементов

В целом я знаю 3 адекватных и кроссбраузерных варианта очистки. В каждом из них есть свои недостатки и приемущества …

Вариант первый.

В целом, его знают практически все, кто хоть как-то мыслит в верстке. Здесь будем оперировать свойством «clear: both;», но для того, чтобы этот вариант был более универсален и стрессоустойчив, добавим туда немного ресета:

Для экономии рабочей области экрана и байтов, стоит написать это определение стиля в одну строчку.

.cl {
	clear: both !important;
	border: none !important;
	overflow: hidden !important;
	display: block !important;
	height: 0 !important;
	line-height: 0 !important;
	font-size: 0 !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

Вариант второй. «Родительский»

Присваиваем класс «cf» блоку, который обарачивает элменты со свойством «float: left|right;» и наслаждаемся результатом.

Удобный, простой, плюс при помощи этой очистки не будем засорять DOM-дерево лишними элементами, НО свойство «height: 1%;», определенное для ие6 может подвести в том случае, если у родительского элемента задана высота.

.cf:after {
	clear: both;
	display: block;
	content: ".";
	height: 0px;
	visibility: hidden;
	font-size: 0;
	line-height: 0;
}
.cf {
	display: inline-block;
}
* html .cf {
	height: 1%;
}
.cf {
	display: block;
}
li.cf {
	display: list-item;
}

Вариант третий (последний). Опять «Родительский»

Совсем недавно, вчера, можно сказать, начал верстать очередной дизайн и открыл (возможно только для себя) еще один вариант очистки для элментов со свойством «float: left|right;».

Для данного варианта очистки нам следует обернуть элементы с обтеканием в блок, со следующими свойствами:

overflow: hidden;
zoom: 1;

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

Россия – Славения

Ах, с каким же вдохновением я начинал смотреть матч «Россия – Славения», и все так тоскливо закончилось …
Ожидал совершенно других результатов, но вроде не к чему забитый мяч в Лужниках в наши ворота все обернул в обратную сторону.