Карта сайта
Sape. Хитрости. Тонкости.
Индексация в yandex.
Иконка сайта favicon.ico
title тэг
CSS3 Закругленные углы
CSS3 Тени(shadow)
Выпадающее меню на CSS
Динамическое меню на PHP
header
Динамическое простое меню на PHP
Динамическое выпадающее меню на PHP и CSS
Динамическое выпадающее меню на PHP и CSS
Динамическое выпадающее меню на PHP и CSS3
Динамическое выпадающее меню на PHP и CSS3
Динамическое выпадающее меню на PHP
СкринШот phpDesigner

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

Возьмем и просто обозначим 3 дива.
Стили CSS
<div style=" border:#C03;"> DIV1</div>
<div style="background: #00C; color: #C03">DIV2</div>
<div style="background: #C00">DIV3</div>

DIV1
DIV2
DIV3
DIV4


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


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


Во всех случаях случаях мы задали  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.
DIV1
DIV1_text
DIV1_text
DIV2
DIV2_text
DIV3
DIV3_text
DIV4




 Как видно 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>
DIV1
DIV1_text
DIV1_text
DIV2
DIV2_text
DIV2_text
DIV2_text
DIV2_text
DIV3
DIV3_text
DIV4








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







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

HEADER
menu1
menu2
menu3
menu4
menu5
ТАБЛИЦА
1 2
1 2
1 2
Что-нибудь еще.
footer