А как сделать макет ?

Обтекание объектов, в последнее время стало популярным решением для создания макетов, обтекние, обтекание нельзя отнести к "позиционным" свойствам в CSS — позиционные свойства это absolute, relative, fixed, и static — однако, когда вы комбинируете вместе ширины (width), отступы (margin), и обтекание, то чаще можно получить более надежный макет, нежели использовать для этого свойства позиционирования, и технически обтекание становится свойством позиционирования.

Рассмотрим простой пример создания двух колонок, Пример 5. Две колонки созданы с добавлением обтекания на блок div ограниченный по ширине семьюдесятью процентами:

#content {    float: left;    width: 70%;  }

Оставшиеся 30% страницы станут второй колонкой (фактически это еще один div) для которого применен стиль margin-left: 75%, чтобы предотвратить пересечение с обтекаемым элементом.

При добавлении обтекания к любому элементу необходимо задать ширину, иначе контент может "поехать". В примере 5, если бы обтекаемый элемент не имел заданной ширины, то он расплылся бы по размеру его содержимого—в таком случае длинные строки перекрыли бы правый блок, но елси для примера заменить содержание на небольшую картинку, ширина обтекаемого блока #content уменьшится до размера изображения.

Пример 5

Обратите внимание, что 70% div и 25% боковая колонка составляют не 100% от ширины страницы, отсутствие внутренних отступов в дивах дает 5% отступ между двумя колонками. На практике, обычно делают дивы 100% ширины, и добавляют отступы проставляя свойства margin или padding.

Для большинства макетов необходимы шапка и подвал, посмотрите на пример 6. В этом примере есть новый блоки 100% ширины страницы для шапки и подвала. Обратите внимание, что #footer начинается сразу за боковым блоком, он выделен фиолетовым.

Пример 6

Наверное вы уже догадываетесь, что здесь следует прменить свойство clear, его можно добавить в CSS:

#footer {    background: #EAD5FF;    border: 1px solid #90F;    clear: left;  }

Эффект от добавления свойства clear показан в примере 7. "Подвал" опустился вниз страницы, под окончание обтекаемого элемента.

Пример 7

А как раскрасить боковй блок?

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

Уберем с блоков рамки, боковой блок имеет заливку, пример 8.

Пример 8

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

Разберем один из вариантов решения:

Вот стили для прмера 9:

#container 
{background-color: #DBFFC2;width: 90%;margin-right:5%;margin-left:5%;} 
#content 

{float: left; width: 70%;} 
 
#sidebar 

{margin-left: 75%;} 
 

#masthead 

{background: #FFC; border: 1px solid #090;}  

#footer 

{background: #EAD5FF; clear: both; border-top: 2px solid #90F;}

Пример 9

В примере 9, оба блока, основной и боковой, сейчас имеют светло зеленую заливку. Шапка и подвал, несмотря на то, что заключены в блок container, имеют собственную заливку, контрастирующую с заливкрй блока container.

На выводе макета, который мы хотели, только однин боковой блок должен иметь светлозеленую заливку, еще один стиль и мы получим желаемое, просто сделаем заливку блока content белой:

#content {    background: #fff;    float: left;    width: 70%;  }

Теперь у нас есть макет с двумя, различными по цвету колонками, обе из которых залиты до конца страницы, пример 10.

Пример 10

Подвал расположен внутри блока container, и имеет свойство clear: both, поэтому блок контейнер протянут до самого конца страницы, чтобы полностью включить в себя подвал.

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

Как насчет трех колонок?

Есть много решений, как создать трехколоночный макет с использованием обтекания, один из них мы рассмотрим Добавим еще один блок с идентификатором innercontainer, заключим в него существующий блок content и новый блок, третью колонку innersidebar.

Блок #innercontainer будет иметь свойства float: left и ширину 75%. Не забывайте про место для нашей правой колонки:

#innercontainer {    float: left;    width: 75%;  } 

Теперь, внесем изменения в стили для блока content, новый блок расположим слева, и второе, подготовим место для нового блока #innersidebar и изменим стили для блока content:

#content {    background: #fff;    float: right;    width: 65%;  }

И наконец, добавим #innersidebar, к коде документа он будет расположен следом за блоком content:

    </div> <!-- end content -->        <div 
id="innersidebar">      stuff and things go here    </div> 
 </div> <!-- end innercontainer -->  <div id="sidebar">  ...  

CSS для него будет следующим:

#innersidebar {    float: left;    width: 35%;  }

В примере 11 для наглядности добавлена черная рамка вокруг блока #innercontainer.

Пример 11

Мне нравится такое решение для трехколоночного макета— оно ставит контент на первое место в исходном коде, что хорошо как для пользователей, так и для поисковых систем, но оно требует наличия двух блоков container, что добавляет несемантичности коду, хотя большинство макетов подобного типа требуют подобной альтернативы.

Если вы поищете те в интернете трехколоночные макеты с обтеканием, то сможете найти множество других техник, по их созданию, с большинством из них вам придется делать выбор в пользу либо несемантической разметки, либо использованию различных хаков и хинтов. Всеже свойство float не является свойством позиционирования, а лишь альтернативным инструментом дизайнеров, если бы CSS свойство display: table поддерживалось большинством основных браузеров, то большинство проблемм "колоночных" макетов решалось намного проще.