Резиновая верстка div 3 колонки (HTML)

Резиновый макет HTML-страницы из трех колонок лучше делать, при помощи див слоев (Страница загружается быстрей, поисковые системы довольны и это круче верстки таблицами).

Смотреть онлайн пример.

Пример

Например нужно сделать макет из трех колонок, левая и правая колонки должны быть фиксированной ширины, а центральная резиновой.

Обратите внимание на код! Центральный див слой (<div id="center">) располагается после слоев <div id="left"> и <div id="right">.

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Резиновая верстка div 3 колонки (HTML)</title> <style type="text/css"> #left, #center, #right {border:#CCC 1px solid; padding:5px 10px;} /* левая колонка обтекание слева, ширина 200 пикселей */ #left {float:left; width:200px;} /* правая колонка обтекание справа, ширина 200 пикселей */ #right {float:right; width:200px;} /* середина, ширина резиновая, внешние отступы слева и справа 240 пикселей */ #center {margin:0 240px;} </style> </head><body> <div id="left"> <p>В левой колонке часто располагается навигация сайта.</p> </div> <div id="right"> <p>В правой колонке часто размещают новости, форму авторизации, поиска, ссылки, спонсоры и так далее.</p> </div> <div id="center"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </body></html>

Категории

Веб-дизайнHTMLВерстка

Комментарии

Артём Фёдоров

А что с footer? <div style="clear:both">Footer</div>

Ответить
Максим Чернышов

а как быть с footer???

Ответить
JaFar

О Боже, наконец -то я нашёл это простое изящьное решение...

Ответить