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

Такие фишки встречаются довольно часто, что ж отдадим дань "гламуру" и мы.

Ценность, как всегда вызывает известные сомнения, но в прогулках по паутине, взгляд нет, нет, да и зацепится.

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

Пара скриншотов, покажет, как на одном и том же скрипте можно сделать две разновидности простейших вкладок-закладок.

На примерах посмотрите более подробно, как оно и что.

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

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

Что больше всего напрягает при использовании таблиц?

Есть, скажем, матрица 3*3, и надо исключить ячейку или даже строку, что мы делаем?

Начинаем объединять эти самые ячейки, а занятие это ну очень муторное. В таких случаях, понятное дело, все зависит от конкретной ситуации, можно прибегнуть к некоторым хитростям, что является весьма действенным методом сокрытия ячеек и строк, это позволяет, не прибегая собственно к правке html-кода, чуть упростить процесс.

Скриншот.

Оформление может быть любым, но нас интересует всего две строчки в таблице стилей, а именно:

.hidden {visibility:hidden;}
.none {display:none;}

Подставляя тот или иной класс в ячейки или строку, мы получаем различное расположение, как ячеек, так и строк.

visibility:hidden; скрывает ячейку или строку, но место, зарезервированное под них, остается.

display:none; проделывает то же самое, но происходит сдвиг и по вертикали и по горизонтали и оставшиеся ячейки или строки занимают освободившееся место.

Есть еще и visibility:collapse, не поддерживается Internet Explorer, но по действию, применение этого правила, аналогично display:none;

Берем на вооружение. Пример

Тема одинаковой высоты колонок и ее эмуляция через border, и попытка для этих целей использовать вместо float - display:inline-block/inline получила свое продолжение.

Хотя, на мой взгляд, она себя исчерпала, но все же.

В примере к статье display:inline-block…, неприятности своим поведением доставила OPERA.

Илья Cтpeльцын (aka SelenIT) в своем дополнении к моему примеру подал идею и вот не устоял перед соблазном, довести до ума не совсем уже удачный пример.

Речь идет о:

<div id="main">
  <div id="middle">
    <div class="content">Content</div>
    <div class="left">Left</div>
    <div class="right">Right</div>
  </div>
</div>

Переработанные стили плюс min/max-width для основных браузеров, IE6 отдыхает :)

<style type="text/css">
#main {
   border:#000 1px solid;
   margin:0 auto;
   min-width:910px;
   max-width:980px;
}
#middle {
   background:#ff9;
   border-right:#cc9 200px solid;
   border-left:#ddd 200px solid;
   white-space:nowrap;/* for OPERA */
}
.content,.left,.right {
   display:inline-block;
   position:relative;
   vertical-align:top;
   white-space:normal;
}
.content {background:#ff9;margin-right:-100%;width:100%;}
.left {right:200px;margin-right:-200px;width:200px;}
.right {right:-100%;width:200px;}
</style>
<!--[if lt IE 8]>
<style type="text/css">
.content,.left,.right {display:inline;overflow-x:hidden;}
.left {margin-right:-200px;}
*+html #middle {overflow-x:hidden;}/* for IE7 */
*html #header,*html #footer,*html #main {width:980px;}
*html .right {right:-580px;}
</style>
<![endif]-->

Правило помеченное для OPERA, решает проблему моего первого примера. Очевидно, что display:inline-block; все-таки строчный элемент и поэтому ведет себя соответственно. Для других браузеров не является обязательным.

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

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

Сто процентная высота с включением header и footer описывалась не однократно, просто ищем, поиск по блогу работает :)

Но не все так гладко, как того бы хотелось :(

Резиновая область контента, накладывает определенные ограничения. Так, введение overflow-x:hidden; для колонок центральной части макета, перенос его из "условных комментариев", выделено синим в таблице стилей, приводит к странностям в FireFox.

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

Разумного объяснения не знаю, лучше overflow-x:hidden; не использовать, но в этом случае ширина блоков/графики внутри колонок, не должны превышать установленную для этих колонок ширину.

min/max-width настроен под ширину области контента. Размер оной приблизительно равен - 510px.

Обновленный пример находим по ссылке display_inline-block_border