Позиционирование блоков css

html css веб дизайн верстка

Здравствуйте! Необходимо сверстать страницу, в которой находится три колонки. Макет страницы:[URL=http://www.radikal.ru][IMG]http://s42.radikal.ru/i097/1209/ed/b875c686a41d.jpg[/IMG][/URL]
В требованиях указано, что в коде блоки должны идти в следующем порядке: шапка, потом центральная колонка, левая колонка, правая и футер. Ширина левой и правой колонок дана и она фиксирована, а центральная должна растягиваться по ширине. К сожалению, абсолютное позиционирование левой и правой колонок не подходит, так как если текста будет много - блок просто будет растягиваться и располагаться поверх футера и родительского блока. А при помощи относительного позиционирования нельзя (или я просто не знаю как это делается) закрепить левую и правую колонку так, как указано в требованиях(чтоб в коде сначала шла центральная колонка, а потом уже левая и правая) в соответствие с макетом. Подскажите, пожалуйста, какими свойствами CSS можно добиться такого позиционирования?(количество текста в колонках может быть переменным)

Примечание:
Макет страницы: http://s42.radikal.ru/i097/1209/ed/b875c686a41d.jpg

Примечание:
slo_nik, для того, чтобы использовать margin - нужно знать размер блока, относительно которого надо двигать левую колонку. Но так как размеры средней колонки "тянутся", это становится затруднительным. Или я не так поняла вашу идею?

Примечание:
slo_nik, простите, предыдущее сообщение адресовано вам ошибочно!
Спасибо за совет, буду смотреть.

Примечание:
slo_nik, при использовании материалов с сайта http://studioad.ru/index/0-10 действительно получается нужный результат, НО! там в коде сначала идет (после хэдэра) левая и правая колонки с фиксированной шириной, а затем вставляется средняя колонка, которая растягивается, а мне нужно, чтобы сначала в коде описывалась средняя колонка, а уж потом левая и правая - в этом то вся и загвоздка. Или может быть такого результата нельзя добиться с такими требованиями? Подскажите, пожалуйста, реализуемо ли такое?
Ответы:

Ссылки

[1]
Без названия
(Web)
Здесь есть:
предлагаю следующий вариант
[html]
<div id="header">
</div>
<div id="content">
<div id="center_block">
</div>
<div id="left_block">
</div>
<div id="right_block">
</div>
</div>
[/html]
[css]
#content {margin: 0; padding: 0 200px 0 300px;position: relative;}
#left_block {width: 300px; position: absolute; top: 0; left: 0;}
#right_block {width: 200px; position: absolute; top: 0; right: 0;}
[/css]


12 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.