Трехколоночная CSS раскладка. Часть 1.
Этой небольшой статейкой я начинаю серию заметок (я так надеюсь) о трехколоночной верстке html-страниц с помощью CSS.
Впервые я столкнулся с трехколоночной CSS-версткой в книге Молли Э. Хольцшлаг "Использование HTML и XHTML". Вообще с этой книги началось мое серьезное знакомство с HTML и CSS.
Итак сейчас я перескажу пример трехколоночной верстки, который приведен в этой книге.
Имеем HTML-код. В этом примере я упустил основные элементы: body, html, head.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi arcu sapien,
pretium et, malesuada eu, porttitor a, risus. Cras pellentesque sollicitudin
nulla. Donec dapibus. Aliquam sed sapien. Nulla quis nulla. Donec eu nisl vitae
turpis lobortis sodales. Sed molestie, massa sed interdum sagittis, neque nulla
pharetra felis, quis semper lorem lacus in diam. Praesent risus lectus, laoreet
eu, consequat sit amet, aliquam ac, velit. Suspendisse sodales, tellus vel
porttitor tempor, enim urna commodo velit, eget eleifend ligula erat a mauris.
Vivamus molestie. Praesent in tortor id lectus mattis lacinia.
Pellentesque porta. Vestibulum nibh. Etiam posuere. Integer tortor purus,
lacinia et, euismod quis, sodales in, urna. Cras pretium rhoncus metus. Aenean
convallis leo ut lacus. Mauris iaculis, dolor id consequat tempor, lectus dui
vestibulum neque, ac sollicitudin est purus vitae orci. Sed sit amet magna.
Vivamus ac neque quis lectus elementum viverra. Nullam odio massa, faucibus id,
feugiat vel, facilisis at, metus. Ut molestie.
Наши интересы:
- Спорт
- Погода
- Новости
Здесь комментировать я думаю особо ничего не надо. Имена идентификаторов говорят сами за себя. Единственное на что я хочу обратить внимание, не относящееся однако к верстке, так это на знак решетки в значении атрибута href. Благодаря такому значению ссылка выглядит вполне работоспособной, и на нее можно даже нажимать, однако это ни к чему ни приводит. Если бы этой решетки не было, то при нажатии на ссылку браузер бы отправил нас в никуда. А так все остается на местах. Очень удобно при тестировании страниц.
Теперь смотрим CSS.
#left {
position: absolute;
left: 10px;
top: 50px;
width: 200px;
}
#center {
margin-left: 200px;
margin-right: 200px;
}
#right {
position: absolute;
right: 10px;
top: 50px;
}
В результате применения этих стилевых правил имеем одну центральную колонку, которая имеет динамическую ширину. А также две колонки по бокам фиксированной ширины.
Хотя пример очень простой, насколько я понимаю, недостаток такой раскладки это неодинаковый размер колонок по высоте. Т.е. если применить к колонкам фоновым цвет, то неодинаковость колонок по высоте будет сразу проявлятся.
Вот как выглядит этот пример в окне бразера.
