Форум Сайтостроение Веб-строительство

Хитрая верстка дивами

М
На сайте с 01.12.2005
Offline
73
Мишган
4219

Как сверстать 3 колонки дивами так, чтобы правая и левая колонки имели фиксированную ширину (ну например 240 и 120px) а центральная занимала всю оставшуюся ширину. Верстка должна корректо отображаться в ie (5,6,7), mozilla(1,2) и opera(8,9).

Cервис для оптимизаторов Optimizer Desktop (http://jdev.ru/od/?utm_source=forum.se.ru&utm_medium=signature): мониторинг позиций, учет ссылок. Программа для оптимизаторов и вебмастеров OptiSuit (http://optisuit.ru/?utm_source=forum.se.ru&utm_medium=signature): Optimizer Desktop на Вашем компьютере
Kolyaj
На сайте с 28.03.2006
Offline
69
Kolyaj
#1

Примерно так:


<div style="width: 240px; float: left"></div>
<div style="width: 120px; float: right"></div>
<div style="margin: 0px 120px 0px 240px"></div>
Scorpio
На сайте с 04.03.2006
Offline
47
Scorpio
#2

http://mambasana.ru/cool/css.html

[Удален]
#3

как вариант левый и правый дивы плавующие с выравниванием соответственно справа и слева, а средний имеет ширину 100% с фоновым рисунком повторяющимся по х. но имейте ввиду блокам надо будет задовать явно высоту либо включать в нутрь таблицу или другой блок.

как вариант напишите несколько таблиц стилей под разные браузеры и разрешения и подключайте нужную скриптом (лично я так и делаю)

Topcrust
На сайте с 23.06.2006
Offline
67
Topcrust
#4

В свое время я изголялся и в довесок к перечисленным условиям делал еще 2:

1. Центральная колонка с контентом в коде идет первой.

2. Если текст в колонках не доходит до самого низа, то верстка всеравно рисуется на 100% высоты окна браузера (т.е. футер "приклеивается" к низу).

А так, ссыла по теме:

ThreeColumnLayouts

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие
R
На сайте с 04.11.2005
Offline
113
robust
#5

Topcrust,

1. Центральная колонка с контентом в коде идет первой.

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

2. Если текст в колонках не доходит до самого низа, то верстка всеравно рисуется на 100% высоты окна браузера (т.е. футер "приклеивается" к низу).

И что, получалось? без навороченной вложенности дивой, скриптов и css-хаков?

R
На сайте с 04.11.2005
Offline
113
robust
#6

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

Topcrust
На сайте с 23.06.2006
Offline
67
Topcrust
#7
robust:
И что, получалось? без навороченной вложенности дивой, скриптов и css-хаков?

Смотря что считать "навороченной". Скриптов нет, 2 хака. HTML таким вот был: 


<div id="out1">



<div class="out2">



<div id="center">center<div>



<div id="left">left<div>



</div>



<div id="right">right</div>



</div>

Ну, и внизу еще footer с header'ом болтались.

Topcrust
На сайте с 23.06.2006
Offline
67
Topcrust
#8
robust:
а по сбажу - проще всего абсолютным позиционированием задать. хотя все зависит от поставленной задачи.

А если колонки разной высоты? И неизвестно, какая самая длинная? И у всех разного цвета фон? А к самой длинной еще футер внизу приклеить надо?

R
На сайте с 04.11.2005
Offline
113
robust
#9

Topcrust,

А если колонки разной высоты? И неизвестно, какая самая длинная? И у всех разного цвета фон? А к самой длинной еще футер внизу приклеить надо?

если хочешь, чтобы я тебе ответил на все эти вопросы, думаю, лучше создай отдельную тему или найди подходящую существующую.

да к тому же, ты же писал, что у тебя нет с этим вопросов, еще и html код привел, правда без css он особой ценности не имеет.

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие
Topcrust
На сайте с 23.06.2006
Offline
67
Topcrust
#10
robust:

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

Не, вопросов нет. Они скорее, риторические :-). А кусок HTML привел - это просто к ответу про вложенность div'ов.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий