Мне нужно выставить 3 блока в ряд так, чтобы средний, с фиксированным размером и фоном, располагался посередине, а те, которые справа и слева от него, растягивались на всю оставшуюся ширину.

Собственно, это мой первый опыт блочной верстки, поэтому опишу задачу в целом. Хедер и футер сайта растянуты на 100%. В правой и левой части - лежат разные бекграунды, которые и должны растягиваться, а средняя часть фиксированного размера.

Мне удалось сделать хедер таким образом: правый и левый див абсолютно позиционированы, прижаты к верху и растянуты каждый на 50%. А средний див выводится как обычно и просто накладывается на них.

 

Для футера я попыталась проделать следующее: крайние блоки растягиваются 50% каждый, а центральный выводится как relative и перекрывает их.


Но! В IE этот центральный див не накрывает крайние, как я хочу, а переносится под них. Получается, в случае IE нужно добавлять top: -112px. Вот как это пофиксить? Ну не подключать же дополнительный css для IE из-за одной строки? Можно ли прямо в css файле проверить браузер? Или что посоветуете, может пример есть?

Вот шаблон, который я пытаюсь реализовать. Сейчас сам шаблон сверстан дивами, но все эти дивы заключены в таблицу 3х3. Я понимаю, что это изврат, но нужно было сайт запускать, так что вот такое временное решение. 

А по хорошему, почему бы не сделать так же как и для хедера?

blah, спасибо, помогло немного. Див сдвинулся вверх в IE6 и остался на месте в остальных браузерах. Однако при этом этом в IE6 внизу окна появляется пустота высотой с мой див, как-будто сам див поднялся, но место для него все равно резервируется. Это можно как-то решить? Кроме того, я решила еще в IE7 посмотреть - там вообще весь футер непонятно как сдвинулся - центральный див съехал вниз, а правый - вниз и влево (а я-то думала, если в 6 будет работать, значит и в 7 тоже).  

Кстати, можете объяснить как читать предложенную вами конструкцию?


Обязательно сделаю, как только все получится. Просто изначально я планировала прижимать футер к нижнему краю окна и везде использовала абсолютное позиционирование. Но потом я на это забила, и без этого сложностей хватает.

Кстати, не знаю, важно ли в этом случае, доктайп - xhtml:

1. Ну в этом собственно и есть фишка относительного позиционирования. Элемент с position:relative; сдвигается относительно места, где бы он находился без него. Чтоб не резервировать место можно использовать #footer { margin:-112px auto 0;} с той же припиской впереди.
2. 6 и 7 ИЕ очень разные. Лучше использовать ширину в 49% и флоатить в разные стороны.
3. 
С доктайпом все в порядке.

Работает!   Но все-таки скажите, для чего нужна приписка * +html? Что этот код работал только в IE, я так понимаю?
Кстати, когда я пыталась прижимать футер к нижнему краю, как раз дивы располагались, как мне нужно. Вот только если текста много, весь футер оставался на месте, а текс проходил под ним дальше. Ну это уже не такая проблема - у меня врядли будут такие пустые страницы.

И еще, как на ваш взгляд мое решение в целом? Я другого просто не нашла.