IMfO.ru

All God’s chillun got shoes

2 Cells

При облаве в наркопритоне был зверски убит сержан Петров. Через трое суток сержанта отпустило.

Ну что, двинем тушками?

cell
3) части, отделения, на которые поделено что-л.
     а) ящик стола, бюро, серванта

Abby Lingvo

Задача «простая»: две колонки равной высоты, минимально — высота окна браузера. Готовых решений не предлагаю, просто мысли.

№ 1. Таблица. Об этом хорошо написал Александр Шуркаев, повторяться не буду.

№ 2. Не сами колонки, а их эмуляция. Цветом или фоновым рисунком. Про графический обман можно почитать на alistapart.com («Faux Columns» by Dan Cederholm). Идеология соблюдена, способ оставляет достаточно широкие возможности для позиционирования блоков, однако иногда одной эмуляции недостаточно.

Нам лёгкости не нужны, только стоя и в гамаке!

№ 3. JavaScript.

№ 4. Float для IE, переопределение значений свойства display у div’ов:

CSS:
html, body { height:100%; margin:0; padding:0; }
#all { height:100%; }
#left, #right { height:100%; width:50%; float:left; }

HTML:
<div id="all">
  <div id="left"> {Left Cell} </div>
  <div id="right"> {Right Cell} </div>
</div>

IE мы удовлетворили. Нормальным браузерам отдаём «перебитые» стили, добавляя такие строки:

CSS:
html>body { display:table; width:100%; }
html>body #all { display:table-row; }
html>body #left,
html>body #right { display:table-cell; float:none; }

Да-да, таблица. Только несколько иная.

Недостаток: блоки могут поплыть. Как вариант:

CSS:
#all {
  height:100%;
  width:expression(document.body.clientWidth>700?"100%":"700px");
  /* для самого стандартного браузера  */
}

Categories: CSS, dHtml | comments: (3)

Комментарии

Комментарии временно отключены.