Верстка div. float и clear.

Возьмем и просто обозначим 3 дива.



Они у нас заполняют все пространство. чутка изменим размеры этих дивов.


Они размещают друг под другом. Но хотелось бы чтобы они были рядом чтоли.

Во всех случаях случаях мы задали  float: left. DIV1 прижался влево. DIV2 прижался влево,
к правому краю DIV1. и т.д. Т.к. DIV4 очень широкий и не поместился, 
то он спустился на следующую строку.
 Стили CSS
<div style=" border:#C03 solid 1px; width:100px; float: left;"> DIV1</div>
<div style="background: #00C; color: #C03; width:200px; float: left;">DIV2</div>
<div style="background: #C00; width:300px; float: left;">DIV3</div>
<div style="background: #900; width:400px; float: left;">DIV4</div>

 Все красиво и замечательно. Но давайте попробуем добаить текста в DIV.

 Как видно DIV4 прижимается у нас к правому краю DIV1. если будет больше текста в DIV2,
то он прижмется к DIV2. чтоб такого не было зададим свойство для DIV4 clear:both. Это значит
запрещено обтекание с права и с лева. И вне зависимости от  размера DIV1, 2 и 3 все время DIV4 будет 
снизу. Такое свойство очень хорошо присваивать диву внутри footer.php и header.php.
 Стили CSS
<div style="background:#9FC; width:100px; float:left; "> DIV1</br>DIV1_text</br>DIV1_text</div>
<div style="background:#00C; color:#C03; width:200px; float:left;">DIV2</br>text</br>text</br>text</div>
<div style="background: #C00; width:300px; float: left;">DIV3</br>DIV3_text</div>
<div style="background: #900; width:400px; float:left; clear:both;">DIV4</div>

 Используя margin можно делать отступы между DIV margin-left:10px;
Для DIV4 margin-top:10px;

Лично я предпочитаю сначала сайт разбить дивами, а потом внутрь дивов пихать что угодно. А если работа с базами данных, то по циклу с помощью php в таблицу которая внутри дива вообще легко все уместить.