Для більшості інформаційних сайтів цілком вистачає двох вертикальних колонок на сторінці – одна колонка для тексту, одна для меню. Якщо немає необхідності задавати точну ширину блокам, можна застосувати найпростішу схему:
body {
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
background-color: #A8C228;
}
#leftcontent {
float:left;
width:70%;
background:#ffffff;
border:2px solid #000000;
margin-right:20px;
padding-bottom:20px;
height: 100%;
}
#rightcontent {
}
Ось і все. Описуємо докладно тільки один блок. При виводі результату браузер відобразить лівий блок по лівому краю, а все місце, що залишилося праворуч, буде зайнято правим блоком. У самій сторінці пишемо:
<DIV id=leftcontent > зміст лівого блоку </DIV> <DIV id=rightcontent > зміст правого блоку </DIV>
Зверніть увагу! Ми не задали фоновий колір правого блоку, він у нас «прозорий». Можна поставити йому свій колір, відмінний від фонового кольору аркуша, але тоді він буде мати чіткі візуальні кордони.
Можна зафіксувати положення блоків і ширину у відсотках, не описуючи внутрішніх відступів, можна задати ширину в пікселях і використовувати метод обчислення, описаний в попередніх статтях.
При деякому старанні можна створити майже будь-яку блокову структуру, це, звичайно, потребує часу і експериментів, але результат цілком може вас порадувати.
Згадавши опис шапки з «Основ позиціонування…» ми можемо отримати цілком стандартну сторінку з двома колонками і шапкою.
***
Це переклад статті.