HTML розмітка гумового макета.
Файл index.html є блочну верстку.
CSS стилі гумового макета.
У файлі style.css пишемо стилі.
html, body height. 100%;
background. # 000;
>
.wrapper margin. 0 auto;
width. 90%;
max-width. 1200px;
height. 100%;
overflow. hidden;
>
.head width. 100%;
height. 100px;
text-align. center;
background. #ccc;
margin. 0.5% 0;
>
.sidebar float. left;
width. 20%;
height. 70%;
text-align. center;
background. #ccc;
margin. 0.5% 0.5% 0.5% 0;
>
.content background. #ccc;
width. 58%;
float. left;
margin. 0.5%;
height. 70%;
text-align. center;
>
.advert background. #ccc;
width. 20%;
float. right;
margin. 0.5% 0 0.5% 0.5%;
height. 70%;
text-align. center;
>
.footer background. #ccc;
margin. 0.5% 0;
height. 70px;
float. left;
overflow: hidden;
width. 100%;
text-align. center;
>
Зверніть увагу, що ширину і висоту блоків в більшості випадків ми вказуємо в процентах.
Перевірка і тестування на «резиновость».
На «резиновость» макет можна перевірити наступним обазом:
Відкриваємо макет в будь-якому браузері, звертаємо вікно браузера натиснувши на значок в правому верхньому куті.
І за допомогою миші змінюємо розмір вікна браузера. Макет при цьому буде «адаптуватися» під розміри вікна браузера.