Автовыравнивающиеся плавающие объекты


Метод вертикального автовыравнивания плавающих объектов, впервые опубликованный на Web-сайте Position is Everything (http://positioniseverything.net/easyclearing.html), предлагал способ выравнивания плавающих элементов без дополнительной разметки.
Но Internet Explorer 7 и более ранние версии не могут формировать автогенерируемый контент с помощью псевдоэлементов : after.
Для того чтобы обойти ограничения Web-обозревателей и обманным путем заставить их выравнивать плавающие элементы, понадобятся два правила CSS — одно для IE7 и другое для IE6.
Применение overflow
Другой метод вертикального выравнивания плавающих объектов — применение редко используемого свойства CSS overflow: div {
border: lpx solid black; padding: 25px; overflow: hidden; zoom: 1
}
Благодаря свойству overflow элемент выравнивает все плавающие объекты, находящиеся внутри него. (Свойство zoom предназначено для IE, если потребуется. Если нет, вы можете исключить его.)
Применение абсолютного позиционирования
Вы хотите задать положение элемента относительно окна, а не с помощью его позиции по умолчанию.
В таблице стилей используйте свойство position со значением absolute. Для указания позиции элемента также воспользуйтесь свойством bottom, left или обоими:
.absolute { position: absolute; bottom: lOOpx; left: 50px;

Проектирование с помощью абсолютного позиционирования выводит контент из нормального потока макета страницы и помещает его в пределах текущего блока или окна точно туда, куда указывают свойства CSS. Пример кода, используемого в реализации примера, предписывает Web-обозревателю расположить элемент с классом absolute точно на 100 пикселов вниз от верхнего края окна просмотра и на 50 пикселов вправо от его левого края.
Посмотрите на стандартный поток вывода изображения и абзаца.
Теперь примените абсолютное позиционирование к элементу div, охватывающему контент, вставив атрибут class и значение absolute:
<div class=,,absolute">
<img src="csscookbook.gif" alt="cover" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat...
</p>
</div>
Для изменения абсолютной позиции также можно использовать свойства right и bottom. Свойство bottom означает нижний край окна просмотра независимо от того, какого размера окно вы сделали.



Правельные рецепты CSS