Xpoint
   [напомнить пароль]

И опять три колонки равной высоты

Метки: [без меток]
2008-07-31 22:52:39 [обр] SunDey[досье]

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

Имеется такой код:

//общий контейнер
#сontent
{
height:100%;
left:50%;
margin-left:-490px;
position:absolute;
top:0px;
width:980px;
}

#left_col
{
background-color:#C9D7FA;
float:left;
height:auto;
min-height:100%;
text-align:center;
width:210px;
}

#center
{
background-color:#FFFFFF;
float:left;
height:auto;
min-height:100%;
width:560px;
}

#right_col {
background-color:#C9D7FA;
float:left;
height:auto;
min-height:100%;
text-align:center;
width:210px;
}

<div id="сontent">
      
<div id="left_col">
         тра та та
      </div>

      <div id="center">
         тра та та
      </div>
      

      <div id="right_col">
         тра та та
      </div>
</div>

Пожскажите, пожалуйста, что-то конструктивное

спустя 15 часов [обр] Thirteensmay(0/138)[досье]
Вы хотите чтобы работало как таблица, идеально для этого использовать display:table, однако это не поддерживается IE. Самым простым и надежным имхо будет сделать не дивами а обычной таблицей. Но если вы попали в зависимость от дивов то придется сильно извращаться: http://www.cssplay.co.uk/layouts/3cols.html
спустя 4 часа 52 минуты [обр] SunDey[досье]
Обратите пожалуйста внимание - что #content располагается по центру стрницы
спустя 3 дня [обр] Serg(7/14)[досье]
Не без нюансов, но делается приблизительно так:
http://trifler.ru/blog/i/layouts/ideal/ideal_3lcr.htm
спустя 4 дня [обр] GruZZ[досье]
http://gruzzilkin.110mb.com/three-col-layout - как вариант. Для IE применяется expression.
спустя 11 часов [обр] Serg(7/14)[досье]
GruZZ[досье]
Если левой колонке задать background:url(left.png) repeat-y #ffe; к примеру,
и посмотреть в IE6 не все так оптимистично :)
Стили группы "podlogka" и соотвествующие пустые контейнеры, не радуют абсолютно :)
спустя 11 часов [обр] GruZZ[досье]
Serg[досье]
А что там может быть не так?
Добавил фоновое изображение, посмотрел в ослике - у меня все нормально. Насчет пустых контейнеров соглашусь - не слишком семантично.
спустя 1 час 5 минут [обр] Serg(7/14)[досье]

GruZZ[досье]
Поставьте фоновое изображение для .left,
а из

.fonright,.fonleft {
  background-image:url(bg.jpg);
  background-repeat:repeat;
}

уберите.
Скажем, не хочу иметь футер всегда прибитый к нижней границе окна браузера :)
При первоначальном открытии страницы левая колонка изчезает,
если удлиннить текст по ссылкам центральной части или в правой колонке, все норма.
При обновлении странички по F5 все повторяется - только в IE6 и проявляется,
давно с этим бюсь, так и не понял в чем дело :)

спустя 5 часов [обр] GruZZ[досье]

Serg[досье]:
Мда, задачка. И ведь странно реагирует IE6 только на свойство background-image!
А если добавить дополнительный блок, допустим .box с нужным фоном, то все работает как надо...
http://gruzzilkin.110mb.com/three-col-layout/maket.html

Но это явный перебор по вложенности div'ов, уж проще таблицей сделать...
Как думаете, есть шанс "исправить" ослик при помощи какого-нибудь хитрого скрипта?

спустя 2 часа 43 минуты [обр] Serg(7/14)[досье]

GruZZ[досье]

Думаю, надо ждать кончины IE6 :)
Слишком уж много внимания ему уделяем.
А в целом

<div class="main">...</div>
<div class="left">...</div>
<div class="right">...</div>

опускаю подробности, это то к чему надо стремиться.

Хотелось бы в конечном итоге такого: http://trifler.ru/blog/i/layouts/problemes.htm
Но и тут, IE6 не в счет, в FF3 невидно border отделяющий область контента от боковых колонок,
в FF2.xx этих проблем нет.
Создание ложных вертикальных линий с помощью background правда решает ее, но...

спустя 3 дня [обр] Serg(7/14)[досье]
Если еще кому интересно:
http://trifler.ru/blog/i/layouts/problems/problemes_end.htm
Каталог хост-провайдеров России и стран СНГ
Powered by POEM™ Engine Copyright © 2002-2005