Пример блочной вёрстки веб-страницы с использованием свойств float и clear

В заголовке документа находится текст

<STYLE type="text/css">
   	*{margin:0; padding:0}
	body {font-family:Verdana,Tahoma,sans-serif; font-size:14px}
	.header {background-color:silver; padding:10px; height:50px; text-align:center; line-height:50px}
	.menu {float: left; border:1px solid black; width: 150px; padding:5px; margin:10px; min-height:200px}
	.text {border:1px solid black; padding:5px; margin:10px 10px 10px 185px; min-height:500px}
	.footer {background-color:silver; padding:5px; clear:both; height: 30px; line-height:30px}
</STYLE>

В теле документа находится текст

<div class="header">Заголовок</div>
<div class="menu">Панель навигации</div>
<div class="text">
	. . . . .
</div>
<div class="footer">Информация об авторских правах</div>

Нюансы компоновки:
1) Чтобы блоки menu и text не наезжали друг на друга, во втором поставлен внешний отступ слева, равный 185px.
2) Поскольку содержимому тега div нельзя задать вертикальное выравнивание с помощью атрибута vertical-align, то центрирования по вертикали добиваются с помощью атрибута line-height, задав ему значение, равное высоте блока.