3-х колоночный макет

[gregsv]

Столкнулся с такой проблемой.

При разметке 3-х колоночного макета решил использовать позиционирование. Колонки обернул дивом, но они игнорируют его.

То что разметил выложил здесь: http://jsfiddle.net/NvLQg/

Как решить проблему? Обтеканием решил не пользоваться, поскольку надо создавать дополнительный слой с clear: both;

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

[Great Rash]

Конечно они его игнорируют, они же абсолютно спозиционированы. Именно по этой причине мы верстальщики геморроимся с флоатами. Вот типичный 3-х колоночный макет, разбирайтесь: http://jsfiddle.net/NvLQg/1/

[gregsv]

В обертке указано относительное позиционирование. По идее колонки должны позиционироваться относительно обертывающего их дива.

В книге "Верстка веб-страниц" описывается позиционирование, как один из способов создания 3-х колоночного макета. Но вот только ничего не выходит при реализации

[Great Rash]

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

[Николя223]

либо, если поддержка для IE8+ , то можно через display: table;

http://jsfiddle.net/nikolya223/VFwnt/embedded/result/

http://jsfiddle.net/nikolya223/VFwnt/

Edited March 20, 2013 by Николя223

[gregsv]

Книга выложена на этом сайте http://htmlbook.ru/blog/verstka-veb-stranits

http://htmlbook.ru/samlayout/tipovye-makety/fiksirovannyi-trekhkolonochnyi-maket

На сайте глава из книги выложена

[Great Rash]

И там написано, о создании макета при помощи абсолютного позиционирования? Может вы не так что-то поняли?

[gregsv]

Использование позиционирования

Для слоя layout устанавливается относительное позиционирование, а для слоёв nav, content и sidebar — абсолютное. При таком сочетании положение элементов меняется относительно родителя с помощью свойств left, right, top, bottom.

[gregsv]

Решил сделать, как и советовали, через обтекание. Но возникла другая проблема, у подвала не действует свойство margin-top

http://jsfiddle.net/3eF4V/

Через позиционирование колонки тоже смог выровнять, но внешний к ним див не меняет своей высоты в соответствии с колонками. Из-за этого подвал наезжает на колонки.

http://jsfiddle.net/NvLQg/2/

Как это выправить?

Edited March 23, 2013 by gregsv

[gregsv]

Народ, может кто-нибудь подсказать, почему при обтекании без дополнительных слоев у подвала не действует madgin-top?

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

Edited March 27, 2013 by gregsv