Редактирование HTML кода
<!DOCTYPE html> <html> <head> <title>Блочная вёрстка</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h2>header ("чердак" сайта)</h2> </div> <div id="sidebar"> <h2>Левая панель</h2> </div> <div id="clear"> </div> <div id="footer"> <h2>footer ("подвал" сайта)</h2> </div> </div> </body> </html>
Редактирование CSS
body { background: #FFF; color: #000; font-family: Arial, sans-serif; font-size: 14px; } #header { background: #F5DEB3; width: 100%; height: 55px; } #container { background: #FFD700; margin: auto auto; text-align: center; width: 80%; height: 400px; } #sidebar { background: #40E0D0; float: left; width: 20%; height: 280px; } #clear { clear: both; } #footer { background: #00BFFF; width: 100%; height: 40px; }
Результат отображения браузером