Колоночная верстка

[dshster]

Ничего, что контент у вас находится в самом конце страницы? Если в колонках будет куча ссылок, куча текстовых абзацев, баннеров, счетчиков, то поисковик долго будет сквозь них продираться, пока дойдёт до основного текста. Да и пользователи скринридеров вам огромное спасибо врядли скажут.

[dioteos]

Контент можно со спокойной душой перенести и в начало страницы. Абсолютные блоки (в последнем примере строки 2-7) неважно в каком порядке идут, их вынесем за блок .container
Та же штука и с блоками стр.12-17 — их поставим после блока .content. На них стоит относительное позиционирование, а на .content нет.
Но за вопрос все-равно спасибо. Учту обязательно и переделаю.

[Rulez]

Выложите переделанные? в этот топик или в другой?

[dohlik]

div.clear можно убрать за счет использования .container:after {}

[dohlik]

И, как мне кажется, лучше избегать использование одного класса для разных блоков (я про .column-l и т.д.). Вынесите общие свойства (ширина, фон и т.д.) в отдельный класс, который будет и у абсолютного блока, и у относительного, а для них дополнительно свои классы со специфичными параметрами.

[dioteos]

Спасибо. Использовал одинаковые классы для того, чтобы не писать в 2-х местах ширину контейнера, а только в одном. Насчет .container:after {} — не использовал для общей наглядности и простоты. Сделаю с ним.

[kostitsyn]

а разве будет работать в IE6-?

[dioteos]

Конечно. Посмотрите для себя статьи
http://habrahabr.ru/blogs/css/48391/
http://habrahabr.ru/blogs/css/66805/
Клеарфикс неплохо рассмотрен.

[Cake_Seller]

Таким методом можно очищать поток? А можете пожалуйста ссылочку дать где можно поподробнее об этом почитать.

[dohlik]

навскидку — habrahabr.ru/blogs/css/48391/

[dioteos]

Извините, но надо еще чтобы футер был «липнущим», и колонки по 100% высоты.
К тому же

padding-bottom: 10010px;
margin-bottom: -10000px;

Мне не очень нравится

[dioteos]

Да. Я знаю. Вы думаете я так просто начал писать и пробовать эту штуку? Может, конечно, я и изобрел еще одного велосипеда, но от этого он, по крайней мере для меня, не менее удобный=)

[egorinsk]

Не используйте его.

Это абсолютно негодный способ. Я на нем обжегся, дело в том, что там используется враппер с overflow:hidden (чтобы спарятать padding). Так вот, разработчики браузеров, подгоняя их под тесты ACID, сделали так, что при переходе на якорь внутри дива с overflow:hidden прокручивается не страница, а содержимое дива! Слов моих нет, чтобы описать это безобразие. В результате, при переходе на якорь (типа /page.html#chapter5) имеем страницу, у которой видна только часть контента (начиная с якоря #chapter5), остальное скрыто.

[Kozlovski]

Семантика тоже важна. Header, расположенный после колонок, совсем не тру. Да и колонки на абсолюте…
Не, это не вариант.

На днях постараюсь выложить свою версию, которую допиливал 2 года. Может кто-нибудь возьмет на заметку.

[dioteos]

Вылаживайте. Может коллективными усилиями соберем на хабре действительно полезную библиотеку. Интересно.

[betaboy]

Мне интересно, жду!

[Kozlovski]

Говорю же, семантике противоречит. Первый элемент на странице должен находиться вверху кода.

[Kozlovski]

Как ни крути, в данном примере, контент вообще непонятно где :)
Ну, а по поводу шапки — а смысл что-то городить? При нормальной конструкции, она всегда будет вверху кода.

[Slon7]

Взгляните, для примера, на верстку википедии.

[Kozlovski]

Посоветуйте еще проверить валидацию гугла :)

Я верстаю коммерческие сайты, там семантика важна. А Вики это не нужно.

[Slon7]

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

[Kozlovski]

Ну тут все же речь о коммерческих проектах…

[Slon7]

Ну в коммерческих проектах ведь семантика соблюдается и для поисковых систем в том числе. Для этой же цели вики выдает основной контент в самом начале.

[Kozlovski]

Вы предлагаете собрать шаблон, в котором шапка будет находиться под контентом?

[Slon7]

Вообще я предлагал взглянуть на верстку вики, где так и сделано. И обратить внимание на причины «почему». Вот и все не более того.

[macgera]

Очень интересно! Жду!

[xaja]

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

[neJa]

он то самый простой, но высота фиксированная, а это не всегда хорошо (

[dioteos]

Минимальная высота фиксирована. Максимальная — в зависимости от контента. Посмотрите первые 4 ссылки в конце статьи

[neJa]

я имел ввиду — высота футера фиксирована, точнее она не задана явно, но ее таковой делает margin-top

[xaja]

за несколько лет разработки никогда не было необходимости сделать футер не фиксированный по высоте.

[xaja]

это фиксированные разделы.
они годами могут не меняться

[neJa]

могут и не меняться, но если будет resizable fonts — как будет выглядеть футер?

[caIIIa]

Сделать в em высоту футера и room под него, в чем проблема — но вопрос риторический

[neJa]

что-то мы не понимаем друг друга — какую задавать высоту футера в em, если в футере может быть 5, а может быть и 25 ссылок + resizable fonts? поэтому этот способ приемлем, но далеко не всегда.

[xaja]

все браузеры уже нормальны ресайзят все масштабно.
если контент автоматом генерится в футере — тады да, но я такого не встречал даже :)

[neJa]

а вот и не все ))))

[xaja]

и че? ради одного недобраузера все изворачивать наизнанку?
я вот не понимаю вас вообще. каждый второй топик орется — «Фтопку ИЕ6!!!!111», но при этом эти же люди тут же пытаются тыкать носом — «а как же ИЕ6?!!11»
тошно

[neJa]

если у нас разговор зашел в такое русло, то:
1) я никому не тыкал, не желаете поддерживать ИЕ6 — и не нужно
2) если вы хотите получить деньги за свою работу и клиент хочет поддержку ИЕ6+, то придется делать.

[xaja]

одно дело поддержка ie6, другое масштабируемость в ie6

[caIIIa]

Сферический footer в вакууме, мы тут обсуждаем вполне стандартные вещи, вашу задачу стандартной назвать язык не поворачивается :)

А ресайз, как уже заметили, давным-давно не шрифтами делается во всех браузерах

[neJa]

отвечу еще раз — не все. Некоторые клиенты все еще хотят, чтобы их сайт выглядел так же в «любимом» браузере как и во всех остальных.

[Kozlovski]

У меня тоже, практически, такой же. Но за ненадобностью убрал z-index. Так и не понял, зачем он.

Вот мой код:

#footer {height:100px; margin-top:-100px; position:relative; width:100%;}

+ у врапера padding-bottom равный высоту футера+отступ.

[dioteos]

z-index для того, чтобы футер перекрывал абсолютные блоки. Так как у абсолютов высота в 100% — они иногда «залезают» на футер

[Kozlovski]

Вывод: Не использовать абсолютное позиционирование для каркаса сайта.

[dioteos]

=) Было бы все так просто…

[Kozlovski]

У меня получается :)

[neJa]

за новый вариант реализации — "+", но несколько смущает наличие пустых блоков, таких как — .column-l и .column-l, если макет фиксированной ширины, то можно все эти бг перенести, например, на .wrapper, еще как вариант реализация с пом. padding-bottom:9999px; margin-bottom:-9999px;

[ocnk]

min-width: 800px; не работает во всеми нами любимом браузере :)

[dioteos]

Не захотел портить код. Вариантов много — от:
* html .wrapper, * html .footer {
filter: expression(runtimeStyle.width = (documentElement.clientWidth||document.body.clientWidth)<800?'800px':'');
}

или

* html .wrapper, * html .footer {
width: expression((documentElement.clientWidth||document.body.clientWidth) < 800? "800px" : "auto");
}

И до растягивающих блоков, которые не дают схлопываться контейнерам.
Посмотрите http://cssing.org.ua/2005/09/02/min-width-for-ie/
Там более подробно описано.

[dioteos]

А что именно вас удивило, если не секрет?)

[kostitsyn]

хаки для осла нужны всегда — закон жизни (-:

[Blah]

В жизни приведенные примеры с колонками с заданным одним цветом бекграунда встречаются очень редко, зачастую используется еще и фоновый рисунок. А если так, то почему бы не создавать тот самый «эффект колонок»?

[dioteos]

В некоторых случаях и он оправдан. Но представьте, что на колонке у вас должен быть горизонтальный градиент. При изменении ширины колонки — надо будет менять изображение фона.
С «эффектом колонок» будет посложнее получить нужный результат.
Но от прложенного вами варианта не отказываюсь — так как сам его иногда использую.

[Blah]

Да, и для html, body

  min-height: 100% !important;
  min-height: auto;

лишнее.

[dioteos]

С этим соглашусь. У меня от этих экспериментов немного паранойя началась. Перестраховался. Спасибо.

[norfild]

И после каждой правки колонок перерисовывать картинку?

[piumosso]

Хорошо. Несколько замечаний.
Футер неплохо было бы во враппер вынести.
Хорошо, когда колонка и её подложка находятся вместе, т.к. всё это хозяйство может генерироваться админкой, например, и так было бы удобнее.

[xaja]

Футер не во враппере именно для прижимания книзу — код то смотрели? вообще зачем это?
а если все таки внести — надо будет еще миллион костылей чтобы его вниз прижать

[piumosso]

а чего ж не смотрел-то? если, например, мне нужен враппер для того, чтобы скорректировать ширину макета и отцентрировать, то в вашем случае мне придётся всё то же самое делать и для футера.

[xaja]

ну давайте, запихните, и посмотрим как будете прижимать.
я хз мне не лень width:999px в двух местах поставить.
зато все будет совершенно четко и стабильно работать

[piumosso]

а что мешает, напрмер, сделать враппер релятивным, а потом абсолютизировать понизу футер? Ведь как был враппер 100% по высоте, так и останется!

[xaja]

неприязнь к абсолютам, примененным к основному лэйауту, но это уже лично мое

[piumosso]

Ну личное, так личное))
А вы не в курсе, это имеет значение с точки зрения производительности и т.п.? (релятивность)

[dioteos]

Такой способ тоже существует и вполне заслуживает право на жизнь. Я привык к вышеуказанному способу как к самому проверенному и надежному.

[piumosso]

А можно поподробней? У меня вроде никогда не было проблем с этим в IE6

[piumosso]

хм…
1. враппер получит hasLayout в моём варианте, т.к. релятивен
2. я достаточно проверяю в ie!
3. специально прибил футер на сайте, которым сейчас занимаюсь, вниз по моему способу и убедился, что в шестом IE всё в порядке

[piumosso]

Ну, принцип, по которому я верстаю, позволяет мне использовать только «железные» конструкции, поэтому таких сюрпризов минимум.
Всем, кстати, советую)))

[piumosso]

хм, не знал

[dioteos]

А что в этом плохого?
.wrapper, .footer{
width:800px;
margin-left:auto;
margin-right:auto;
}

Костыль для ие
* html body{
text-align:center; /* Только не забудьте его потом переопределить */
}


[piumosso]

Да в общем, ничего, я не утверждал, что это плохо (максимум, expression два раза отработает), а просто подумал, как бы я это сделал.

[alxsad]

.wrapper, .footer{
width:800px;
margin-left:auto;
margin-right:auto;
}

.wrapper, .footer{
width:800px;
margin:0 auto;
}

не обращайте внимания=)

[dioteos]

margin:0 auto; можно указать только для .wrapper.
Для футера это будет
margin:-60px auto 0 auto;
Потому я и выбрал такую запись для наглядности

[web4_0]

Идея неплоха, но, как обычно, нюансы выявляются при «натягивании» конкретного дизайна и контента.

Расцветка макета как в advice dog — психотропно

[dioteos]

Согласен. Способ еще не обкатан. Со временем постараюсь выкинуть все лишнее и довести до универсальности. За рачцветку простите) Я больше над позиционированием думал)

[alxsad]

+карма

[0lympian]

В опере 9.64/10.10 второй вариант некорректно работает: первая колонка тянет страницу по высоте, а вторая колонка доходит только конца первого экрана :(

[macgera]

Извините автор… но ваш вариант не всегда подойдет… а если честно… то в крайне редких случаях =(

[dioteos]

Пожалуйста, аргументируйте. До сих пор я и сам обходился без него прекрасно. Попробую применить в разработке среднего звена проекта.

[serf]

зачем для div указывать display: block?

[dioteos]

У меня почему-то иногда возникали проблеммы с ие5.5 и 6. Потому и поставил. Финальную версию буду оттачивать

[g15rus]

А правая колонка должна стоять справа?
А то у меня вот так это выглядит


Хром 4.0.229.1
OpenSuse 11.1

[dioteos]

Я пока-что не делал примера с расбросом колонок. Они по одну сторону у меня. Назвал просто так. Надо было первая/вторая назвать. Сделать, чтобы разносилось по разным углам также не предоставляет сложностей. А ссылка. которую вы привели почему-то недоступна

[GruZZ]

Да, каждый верстальщик должен сверстать свой Holy Grail… Я похожий макет «придумал» вот тут.

По теме отпишусь позже.

[webmolot]

для .footer необходимо отдельно прописать min-width, т.к. он вынесен за .wrapper

[dioteos]

Да. Вы правы. Недоглядел малость. Причесывать еще буду код и причесывать)

[Blah]

А по-хорошему указать min-width для корневого элемента, т.е. body.

[Xenkok]

без обид, но сразу видно, что фонарь. то что решение рабочее и может многим подойти и будет кроссбраузерное — это не вопрос. но когда идут три колонки, а потом хедер, то сразу становится ясно, что человек не знает, что такое семантика — то к чему сейчас стремится верстка и то к чему ведет нас хтмл5. поменяй вы хедеры и колонки местами и загляни я в просмотр хтмл страницы вашего сайта, я бы сказал, да этот человек что-то понимает, а так… и позишн абсолют. работайте.

[dioteos]

Какие могут быть обиды)
Посмотрите, пожалуйста комент
В следующей версии контент будет идти сразу за хедером. Это не представляет особой проблемы. А насчет абсолютного позиционирования — я привел технический метод реализации проблемы.

[ImKremen]

Не что подобное верстал позавчера, как тест для работодателя.
Валидно и кросбраузерно, но до уровня использования не допилил.
docs.google.com/leaf?id=0B36qsyGVYobGZGM3N2JkZDYtOTU1Ny00MjMzLWJhMzYtZmQ1MzRjMzRlYmVj&hl=ru

[ImKremen]

Вот, собственно, задание docs.google.com/leaf?id=0B36qsyGVYobGNDdjNTQxNmMtZWJjMi00NTZkLThlNWItZTA4YmEzN2E0Mjk2&hl=ru

[ImKremen]

По условиям задания, использовать можно только CSS. HTML изменять нельзя.

[dioteos]

Ваш вариант еще немного сыроват. Попробуйте добавить много контента — увидиье. Футер остается на месте, а контент улезает под него. Это ФФ3.5.

[dioteos]

*увидите

[ImKremen]

Я это и имел ввиду под «до уровня использования не допилил».

[lol2Fast4U]

>ie5.5
Зачем?

[dioteos]

Просто стало интересно. Никогда о нем не задумывался. В общем — остался даже довольным. Как по мне — намного меньше багов, чем в ие6. Хотя это чисто субъективное мнение.

[lol2Fast4U]

MS не везет с цифрой 6.
IE 6 — самый глючный, Windows 6 (Vista) — такая же.

[dioteos]

WinMobile 6 в продолжение темы)

[lol2Fast4U]

У меня 6.1 — видимо, единичка помогает — не глючный %)

[Gunger]

chikuyonok.ru/2009/06/float-columns/
chikuyonok.ru/playground/cols/

[egorinsk]

Код ужасный. На уровне free-lance ru. Смотреть страшно, а уж применить…

1) Почему у .container height = 1%? Вы сдурели там что ли? Это хак для IE 5.0? Или у вас контент составляет 1% от высоты страницы?
2) Почему все свалено в кучу, нормальные css-стили и хаки для хромоногих браузеров?
3) Почему нет min-width на HTML? Без него при уменьшении ширины окна интересные эффекты с фоном страницы. Почему нет max-width на wrapper?
4) для Html/Body/Wrapper стоит убрать margin colapsing (чтобы верхний маргин контента не вываливался наружу)
5) Зачем вы для .container пишете display:block? Скажите мне, скажите, в каком браузере div по умолчанию отображается не блоком???
6) Зачем в футере position: relative?
7) Эта проблема становится сегодня менее актуальной, но у вас все размеры блоков заданы в пикселах! при увеличении шрифта они не будут растягиваться, и он будет из них вываливаться. Я. например, для футера пишу по этой причине не height, а min-height — пусть футер уйдет за границу экрана, но текст из него не вываливается.

В общем стили абсолютно кривые. Вам определенно стоит почитать описание CSS на сайте w3c, тематические блоги, и т.д, а не выкладывать это на главную. Я *категорически* не советую брать этот код кому-то за основу.

> Глубоко копать не буду, так как думаю, что тут все предельно ясно.

Думаю, вы сами не понимаете, что к чему в этой каше. Просто подобрали опытным путем. Я когда-то тоже таким методом пользовался.

Для прилипающего футера достаточно height: 100% на html & body, и min-height: 100% на wrapper (+ padding). И все. Плюс, возможно, пара хаков для IE6 (он понимает height и width как min-height и min-width для блоков с hasLayout? который включается через zoom:1). Я советую всем выносить хаки для IE6/7 в отдельный подключаемый через conditional comments файл, все равно скоро эти убогие браузеры вымрут, нечего портить ради них основной файл стилей.

Ну а по поводу колонок — мне нравятся идеи с флоатами (смотрите на chikuyonok.ru ). Флоаты, хоть и старая технология, но проверенная временем. кроссбраузерная и влияет на поток, в отличие от абсолютного позиционирования.

Ну и еще добавлю, какие требования я люблю предъявлять к своей верстке (хоть и не всегда получается их выполнить, но это полезно в плане образования и развития):

1) Валидность, предпочитаю HTML 4.01 Strict (да и у убогого браузера с ним проблем меньше)
2) Поддержка ИЕ6, правда сейчас вместо написания всяких тяжелых expressions, behavoiurs и прочих яваскриптов предпочитаю просто упрощать вид страницы: вместо круглых уголков — квадратные, вместо png24 — png8, но зато все читаемо и не тормозит
3) Читабельный вид страницы без стилей: для этого приходится переставлять блоки в исходнике, чтобы сначала шел контент, а потом дополнительные блоки, хедер, меню, и футер.

С этим пунктом серьезная сложность: сколько оставить места перед контентом, если мы не знаем сколько займет хедер и меню (с учетом изменения размера шрифта?).

4) Читабельность страницы без рисунков: значит. всюду, должны быть прописаны правильные фоновые цвета, а блоки со скругленными уголкаим превращаются в блоки с квадратными уголками (о да, это было нелегко сделать :) )
5) Ну и максимум доступности при работе без яваскрипта — потому что люблю пользвоаться браузером без яваскрипта.
6) Вот минимум лишних блоков целью не ставлю, ибо перечисленное выше имхо важнее. Лучше всюду вставлять пустые ins, чем смотреть, как IE не поддерживает :after и :before :(

[dioteos]

Для начала приведите свои разработки в студию.
Что-то много написано, да ничего хорошего. Вы спец? Докажите. Вы общаетесь с людьми, у которых не один десяток сделанных проектов. Качественно сделанных. Если ничего по сути не можете сказать, а просто хотите показаться великим — дело ваше. Ветку с вами развивать не намерен.
Кстати, в институте вас должны учить и культуре. Сходите. Послушайте.

[egorinsk]

> Вы общаетесь с людьми, у которых не один десяток сделанных проектов. Качественно сделанных.

Мы в этом топике не обсуждаем чьи-то проекты, а приведенный вами код. Только его. Я понятия не имею, сколько вы сделали проектов, но в любом случае количеством меряться глупо — «фабрику сайтов» вы все равно не обгоните.

Вы, например, сможете объяснить смысл каждой строчки в первом примере? Если нет, зачем вы этот код тут публикуете? По вашему, CSS пишется исключительно методом подбора, пока не заработает? Какой смысл по 3 раза переопределять height? Вот упомянутый ранее Сергей Чикуенок с своем блоге, например, объясняет почему он пишет так, а не иначе.

Здесь же много начинающих верстальщиков, стоит ли их изначально учить такому подходу?

И насчет культуры — ну извините конечно, если вас задел мой комментарий, но он весь про код, я не перехожу на личности :) И если мне кажется, что что-то криво или неправильно, я так и пишу. И я по-прежнему думаю, что абсолютное позиционирование там для колонок — изврат. Я сам с ним возился и мне не понравилось, что получилось в итоге.

[egorinsk]

> Хак для IE6. По-хорошему, конечно, должен идти в паре с height: auto !important или в CC.

hasLayout включить что ли? Мне как-то больше zoom нравится, сразу видно, что хак :)

Ну и «должен идти в паре с heigt:auto» — а разве не лучше кинуть все эти мерзкие хаки в отдельный файл (ну или в конец общего файла, если вам неохота загружать 2 файла), чтобы основной код хотя бы нормально читался? Невозможно же воспринимать код. в котором height 3 раза указана, и всюду разная!

>> интересные эффекты с фоном страницы
> Лучше всего лечатся раздельным указанием фонов для html и body (имхо).

Я имею в виду, что фон сайта часто задается на элементе html или body, и если задать min-width для wrapper (а не для html), при узком окне html станет по ширине уже wrapper и справа просто белый фон :) Кстати, похожая проблема есть даже на сайте artlebedev — при увеличении шрифта внутренняя часть страницы становится шире body и страница вываливается вправо, а хедер и футер остаются узкими.

> Графические дизайнерские плюшки, в которые эти блоки чаще всего приходится вписывать — как правило, тоже :). А юзеры IE6, FF2 и Chr1 сами не ищут легких путей.

Вообще да, я упомянул, что сейчас это менее актуально, с приходом нормальных браузеров. К сожалению, сам CSS крайне несовершенен для верстки чего-то сложнее, чем страница простого текста, тем более с учетом разных размеров шрифтов.

Но все же лучше (где можно) пользоваться по возможности em'ми, так как например в Линуксе нет некоторых шрифтов, они заменяются на другие, с другой высотой или шириной, и попиксельная верстка может поплыть там :) Именно из-за таких проблем, и не удается нормально сделать хедер в конце HTML-кода, а потом с помощью А.П. перекинуть его вверх :(

А еще есть ИЕ7, у которого какой-то свой алгоритм зума (в котором ломается даже сайт microsoft, ололо, так что я даже не интересовался как он работает и не проверяю сайты в нем, вроде он что-то нехорошее делает с маргинами при зуме).

[egorinsk]

> но иногда требования включают абсурдное на мой взгляд условие «валидный CSS2.1», и приходится изгаляться…

Ну вот, я ж говорю, проще все мерзкие хаки в файлик ie.css засунуть, и не придется потом писать height по 3 раза :)

А по поводу em'ов — это еще что, я вот экспериментировал с image text replacement, когда поверх текста кладется картинка, с каким-нибудь нестандартным шрифтом, как размеры такой картинки рассчитывать с учетом возможности изменения размера шрифта, и с учетом линуксоидов — непонятно :( Плюс, карти нка должна быть непрозрачной (чтобы исходный текст не проглядывал), так что размеры с запасом не возьмешь. Придется ждать всеобщего распространения векторной графики, ибо пиксельная в данном случае имеет свои ограничения.

[norfild]

Простите но Вы что хотели большим количеством текста хотели прикрыть свою некомпетентность в области верстки?

[redigen]

Функционально решение практически ничем не отличается от фоновой картинки, бывало я как то сам из-за лени тянул абсолютно с позиционированные блоки слоями ниже. Этот способ не решает поставленной цели, представьте, что у вас одна колонка поделена на 3 части разных цветов и все 3 части равномерно тянутся по высоте. При этом каждая часть наполнена контентом. В таком случае у вас не получится тянуть абсолютно с позиционированный блок синхронно с контентом. Если не понятно могу нарисовать)

[Cake_Seller]

Мне непонятен вот этот момент:

html, body {
        min-height: 100% !important;
        min-height: auto;
        height: 100%;
        border: none;
      }

Я бы тут ограничился просто height: 100%; (и, на сколько мне известно, всё при этом работает). Зачем задавать min-height, а затем ещё и переопределять его?

[kostitsyn]

habrahabr.ru/blogs/css/81193/#comment_2401364

ответили уже

[alexunder]

У меня (ff3.5.2, 1280х800) во всех примерах если сделать окно браузера шириной 50%, к примеру, и скролить вправо — футер не дотягивается до правой границы страницы. Так и должно быть?

[Tremor]

Если попытаться из этого сделать фиксированный макет, поставив wrapperу
   margin: 0 auto;
то ie 6 не будет центрировать div (из-за <?xml version=«1.0» encoding=«UTF-8»?> в начале страницы).
Если же убрать этот <?xml version=«1.0» encoding=«UTF-8»?>, то тот же 6-й ие перестает растягивать колонки. Есть ли выход?

[Sytrus]

Единственное решение, которое всегда спасало, это использование overflow: hidden и float для левого/правого блока и контента, абсолютное позиционирование футера и паддингом контейнера, min-height: 100% для #main и height: 100% для html. Гм… вроде все. Работает 100% с любыми вариантами. Респект верстальщику, что показал мне этот способ.