Для начала нам требуется создать код, к которому в дальнейшем прикладываются стили. Плавающие элементы всегда располагаем в начале, поэтому рисунок с головой вставляем первым, затем уже следует заголовок и текст (пример 6.18).
Пример 6.18. Блок с предупреждением
<section class="warning"> <img src="/images/head.png" class="voodoohead" alt="" width="49" height="92"> <header><h1><img src="images/warning-title.png" alt="Предупреждение"width="137" height="30"></h1></header> <p>Все перечисленные на сайте методы ловли льва являются теоретическими и базируются на вычислительных методах. Авторы не гарантируют вашей безопасности при их использовании и снимают с себя всякую ответственность за результат. Помните, лев это хищник и опасное животное!</p></section>
В стилях для изображения головы ставится свойство float со значением left, а тексту заголовка и абзаца смещение левого края через margin-left. Для отмены обтекания к warning добавляется overflow со значением hidden.
section header {background: none; /* Убираем фон */ }.warning { overflow: hidden; /* Отменяем обтекание */ margin: 30px 0; /* Отступ сверху и снизу */}.voodoohead { float: left; /* Обтекание справа */}.warning H1, .warning P { margin: 0 0 0 70px; /* Отступы */}
