Итак, для чего это? Иногда на странице не имеется достаточно пространства, чтобы показать большие изображения, но все же очень хочется избежать маленьких и едва распознаваемых картинок. Используя предложенную уловку, мы ограничиваем видимые размеры изображения, и показываем полноразмерное изображение, только когда пользователь наводит указатель мыши на миниатюрное изображение. Впрочем, посмотрите все на примере:

Вы можете скачать исходный код примера, и воспроизвести этот пример на своем сайте.

То, что мы видим, это не фактическое изменение размеров изображения. Это – изменение размеров видимой области при наведении указателя мыши. Здесь используется CSS-свойство overflow.

Свойство overflow определяет отображение контента, когда он переполняет область контейнера. Если размеры контейнера ограничены по какой-либо причине, свойство overflow используют, чтобы определить поведение при переполнении контейнера. Возможные значения свойства overflow: visible, hidden, scroll и auto. На использовании свойства overflow и построен этот трюк. По умолчанию часть картиники скрывается, и появляется только при наведении указателя мыши.

Идея состоит в том, чтобы поместить изображение в какой-либо контейнер. Договоримся о том, что таким контейнером для изображения будет являться тэг a. Мы устанавливаем размеры (ширину и высоту) контейнера в требуемые значения, и устанавливаем свойство position контейнера relative. Изображение же внутри имеет position:absolute. Используем отрицательные значения свойств top и left, чтобы сместить изображение. Таким образом мы теперь видим только часть картинки в нашем контейнере. Оставшаяся часть картинки скрыта. И показана целиком она будет только лишь при наведении указателя мыши, т.е. при a:hover мы установим свойству overflow значение visible и покажем картинку целиком.

HTML-код – проще не бывает:

<ul id="thumbs">
  <li>
  <a href="http://example.com/"><img src="1.jpg" /></a>
  </li>
  <li>
    <a href="http://example.com/"><img src="2.jpg" /></a>
  </li>
  <li>
    <a href="http://example.com/"><img src="3.jpg" /></a>
  </li>
  <li>
    <a href="http://example.com/"><img src="4.jpg" /></a>
  </li>
</ul>

Вот фрагмент CSS-кода с комментариями:

/* убираем поля и отступы, */
/* скрываем маркеры списка */
ul#thumbs, ul#thumbs li{
  margin:0;
  padding:0;
  list-style:none;
}

/* включаем элементы списка в плавающую модель, */
/* смещая их влево и таким образом вытягивая по */
/* горизонтали, заодно ставим легкую рамочку и */
/* задаем небольшое поле справа */
ul#thumbs li{
  float:left;
  margin-right:2px;
  border:1px solid #999;
  padding:1px;
}

/* вот он, контейнер для картинки, "глазок", в */
/* котором отображается ее часть */
ul#thumbs a{
  display:block;
  float:left;
  width:70px; /* ширина видимой части */
  height:70px; /* высота видимой части */
  line-height:70px;
  overflow:hidden; /* скрываем "лишнее" */
  position:relative; /* это важно! */
  z-index:1;
}

/* ну и сама картинка позиционируется абсолютно, */
/* ее верхний левый край смещается в невидимую */
/* область */
ul#thumbs a img{
  float:left;
  position:absolute;
  top:-10px;
  left:-35px;
}

Теперь CSS-код, который определит поведение при наведении указателя мыши на картинку.

/* показываем картинку полностью, "поднимаем" */
/* ее над соседними картинками и убираем рамку с */
/* элемента  - она теперь не нужна. */
ul#thumbs a:hover{
  overflow:visible;
  z-index:1000;
  border:none;
}
/* а вот полной картинке рамочку добавим */
ul#thumbs a:hover img{
  border:1px solid #999;
  background:#fff;
  padding:2px;
}

Эту идею можно использовать и для единичной картинки. Исходный код разбирать подробно наверное уже не стоит, потому как в интересующей нас части он ничем не отличается от уже разобранного нами. А пример – пожалуйста:

Вы можете скачать исходный код примера, и воспроизвести этот пример на своем сайте.

Вот и все. Надеюсь, кому-нибудь пригодится.

Вы можете скачать исходный код примера, и воспроизвести это пример на своем сайте.

В этом примере не используется ни JavaScript, ни какие-либо другие приложения. Используется только HTML-разметка и CSS.

Повторюсь, я немного «оживил» пример, добавив php-код, который генерирует набор случайных двузначных чисел. Нажмите кнопку «Пересчитать» и диаграмма изменится.

Стоит только осознать идею Алена, как все становится понятным. Для построения диаграммы выбран элемент dl (definition list). Но можно рассматривать элементы dt (definition titles) как пункты по оси X и элементы dd (definition descriptions) как значения по оси Y.

Чтобы понять это, давайте посмотрим на пример разметки диаграммы без стилевого оформления. Вот так это выглядит:

1-й день

27

2-й день

53

А вот соответствующий этому HTML-код:

<dl>
  <dt>1-й день</dt>
  <dd>27</dd>
  <dt>2-й день</dt>
  <dd>53</dd>
</dl>

Далее добавляем внутрь элементов dd элементы span и внутри них элементы em. Элементам span назначаем имена классов. В итоге должно получиться вот это:

<dd><span class="type2 p80"><em>80</em></span></dd>

Теперь начнем разбираться с таблицей стилей.

dl#csschart, dl#csschart dt, dl#csschart dd{
    margin:0;
    padding:0;
}
dl#csschart{
    background:url(bg_chart.gif) no-repeat 0 0;
    width:400px;
    height:400px;
}

Удаляем установленные по умолчанию поля и отступы и в следующем правиле задаем для элемента dl свойство background и определяем его ширину width и высоту height.
Файл bg_chart.gif – картинка фона для диаграммы в которой нарисованы оси X и Y. Картинка как раз имеет размеры 400х400 px.

dl#csschart dt{
    display:none;
}

Делаем невидимыми элементы dt, поскольку информация, содержащаяся в них (1-й день, 2-й день,…) нам не нужна.
Дальше – интереснее…. Элемент dd содержит два дочерних элемента – span и em. Таким образом можно манипулировать тремя элементами.
Элементы dd позиционируются с помощью добавления полей, установки их высоты в 100% и ширины в соответствии с шириной шага сетки на фоновой картинке. Элементы dd включаются в «плавающую» модель (float:left;), используется относительное (position:relative;) позиционирование, что позволяет сопоставлять дочерние по отношению к dd элементы (span и em) со своим родителем (dd). Ниже это можно увидеть в CSS-коде.

dl#csschart dd{
  position:relative;
  float:left;
  width:36px;
  height:360px;
  margin-top:20px;
}
dl#csschart dd.first{
  margin-left:22px;
}

Элементы span выполняют роль колонок, позиционируются абсолютно относительно своего родительского элемента (dd) и располагаются в самом низу, что позволяет им «вырастать» до нужного размера, базируясь на значении количества процентов. Элементы em – квадратики, где цифрами отображается количество процентов. Кусочек этого кода приведен ниже:

dl#csschart span{
  position:absolute;
  display:block;
  width:33px;
  bottom:0;
  left:0;
  z-index:1;
  color:#555;
  text-decoration:none;
}
dl#csschart span em{
  display:block;
  font-style:normal;
  float:left;
  line-height:200%;
  background:#fff;
  color:#555;
  border:1px solid #b1b1b1;
  position:absolute;
  top:50%;
  left:3px;
  text-align:center;
  width:23px;
}

Но как же получается требуемая высота?
Давайте снова обратим внимание на HTML-разметку.

<dd><span class="type2 p80"><em>80</em></span></dd>

Мы увидим, что элемент span имеет два css класса.
Первый класс определяет тип столбика диаграммы, посмотрите css-код и тут все станет понятно:

dl#csschart span.type1 {
  background:url(type1.gif) repeat-y;
}
dl#csschart span.type2{
  background:url(type2.gif) repeat-y;
}
dl#csschart span.type3{
  background:url(type3.gif) repeat-y;
}
dl#csschart span.type4{
  background:url(type4.gif) repeat-y;
}

Просто в качестве фонового изображения используются небольшие разноцветные полоски.
Второй же класс (p0 – p100) фактически определяет высоту элементов span.

dl#csschart span.p0{height:0%;}
dl#csschart span.p1{height:1%;}
dl#csschart span.p2{height:2%;}
dl#csschart span.p3{height:3%;}
dl#csschart span.p4{height:4%;}
.........................
dl#csschart span.p99{height:99%;}
dl#csschart span.p100{height:100%;}

Вот так работает эта штука.

Для примера придумаем несложный HTML-код. Пусть это будет элемент DIV, внутри которого есть картинка и текст. Ну например вот такой:

<div id="example">
 <img src="http://myserver.ru/img/im1.png" alt="Это картинка" />
  А это просто текст слов...
</div>

Я не буду задавать какие-либо стили для элементов, находящихся внутри блока #example, ведь это только пример, а вот CSS-правило для этого блока разберем подробно.

#example {
  position:absolute;
  top:50%;
  left:50%;
  width:250px;
  height:200px;
  margin-left:-125px;
  margin-top:-100px;
  border:1px dotted red;
}

Я исхожу из того, что нам заранее известны ширина и высота центрируемого элемента. Ведь именно этими величинами мы попытаемся воспользоваться, чтобы центрировать элемент на в окне браузера (именно в окне браузера, а не на экране).

Задавая элементу #example абсолютное позиционирование, мы извлекаем его из нормального потока и имеем возможность поместить в любом месте страницы. Что мы и делаем, помещая верхний левый угол элемента в центр окна браузера, задавая свойствам top и left значения 50%.

Зная ширину (250px) и высоту (200px) элемента #example мы задаем свойствам margin-left и margin-top отрицательные значения, равные половине ширины и, соответственно высоты центрируемого элемента, заставляя его таким образом сдвинуться влево и вверх и занять место в центре окна браузера.

Свойство border добавлено лишь для наглядности.

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

Но все-таки для большинства задач это решение вполне подойдет.

Как всегда первый шаг – это создание HTML-разметки.

<ul>
  <li><a href="/">Главная</a></li>
  <li><a href="products.html" id="current">Продукция</a></li>
  <li><a href="gallery.html">Фото</a></li>
  <li><a href="responses.html">Отзывы</a></li>
  <li><a href="feedback.html">Контакты</a></li>
</ul>

Здесь необходимо обратить внимание на пункт, где встречается id=»current». В реально работающем меню необходимо определять текущую страницу при ее загрузке и присваивать этот id соответствующему пункту.

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

ul {
  padding:3px 0;
  margin-left:0;
  border-bottom:1px solid #003;
  font:bold 8pt Verdana, sans-serif;
}
ul li {
  list-style:none;
  margin:0;
  display:inline;
}
ul li a {
  padding:3px 0.5em;
  margin-left:3px;
  border:1px solid #003;
  border-bottom:none;
  background-color:#FFA6BD;
  text-decoration:none;
  color:#AD2039;
}
ul li a:hover {
  background-color:#AD2039;
  color:#FFA6BD;
}
ul li a#current {
  background-color:#fff;
  border-bottom:1px solid #fff;
}

Ничего особенно хитрого тут нет. Сначала зададим отступы и левое поле для элемента ul, там же определяем нижнюю рамку для всего элемента и шрифт, а вот затем начинается более интересное правило. Для ul li мы скрываем стандартные маркеры, полям задаем значение 0 и наконец display:inline; – вот что заставляет наш список «вытянуться» в строку.

Дальше описываем элемент a, задавая ему отступы, поля, рамки, определяя цвет фона и шрифта. Обращу внимание разве что на определения свойства border. Сначала заданы значения свойства border для всех четырех сторон, а в следующей строке мы пишем border-bottom:none;, т.е. отменили рамку снизу. Такой вариант написания вполне имеет право на существование.

Далее определяем стили элемента а при наведении на него указателя мыши – тут мы изменим только цвет фона и цвет текста.

И самое последнее – стили для элемента имеющего id=»current». Цвет фона задаем совпадающим с цветом основного фона страницы, как впрочем и цвет нижней рамки.

Вот, что у нас получилось в итоге.

Итак, приступим. Меню будет представлять собой список, так как и теоретически и практически это наилучший способ структурирования меню. Прежде всего создадим HTML-разметку.

<ul>
  <li><a href="/">Главная</a></li>
  <li><a href="about.html">О компании</a></li>
  <li><a href="products.html">Каталог продукции</a></li>
  <li><a href="gallery.html">Фото объектов</a></li>
  <li><a href="responses.html">Отзывы клиентов</a></li>
  <li><a href="scheme.html">Схема проезда</a></li>
  <li><a href="feedback.html">Форма для связи</a></li>
</ul>

Далее приведу файл стилей, который будет подробно прокомментирован.

ul {
  list-style:none;
  margin:0;
  padding:0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:0.9em;
  font-weight:bold;
  width:20em;
  border-bottom:1px solid #003;
  border-right:1px solid #003;
  border-left:1px solid #003;
}
ul li {
  border-top:1px solid #003;
}
ul li a {
  display:block;
  padding:2px 2px 2px 0.5em;
  border-left:15px solid #AD2039;
  background-color:#FFA6BD;
  color:#AD2039;
  text-decoration:none;
  width:100%;
}
html > body ul li a {
  width:auto;
}
ul li a:hover {
  border-left:15px solid #FFA6BD;
  background-color:#AD2039;
  color:#FFA6BD;
}

Рассмотрим подробнее стилевое оформление элемента ul. Сначал скроем стандартные маркеры списка, затем установим значения свойств margin и padding (почему мы устанавливаем именно оба свойства можно прочитать в статье «CSS: задание отступов и изменение стилей маркера в списках.»). Свойства font установят нужные шрифты и размер. Свойство width ясное дело будет отвечать за ширину списка. Следующие три строки устанавливают рамку шириной в 1px справа, снизу и слева для элемента ul.

Почему не сверху? Потому, что неплохо иметь такую же тонкую рамку, которая будет отделять каждый элемент списка. Это мы проделаем, написав правило border-top:1px solid #003; для ul li (для всех элементов li, являющихся дочерними по отношению к элементу ul).

В следующем правиле ul li a мы зададим стили ссылок. Поскольку элемент a по умолчанию – это строчный элемент, нам необходимо изменить его отображение, чтобы элементы a отображались как блочные. Это необходимо для того, чтобы можно было использовать меню щелкая мышью на всем выбираемом элементе, а не только на тексте ссылки. Делаем это, задавая свойству display значение block.

Определяем отступы со всех сторон в свойстве padding, задаем рамку слева толщиной в 15px в свойстве border-left, определяем свойства background-color (цвет фона) и color (цвет текста), а также удаляем подчеркивание ссылок, воспользовавшись свойством text-decoration.

Последняя строчка задает теперь уже блочному элементу ширину width в 100%. Это сделано специально для IE, но может создать проблемы в Netscape Navigator и IE для Mac и поэтому следующее правило html>body ul li a написано специально для решения этой проблемы. IE не сможет его прочесть, поскольку не умеет обрабатывать правила для селектора потомка.

И наконец последнее правило будет задавать стили использующиеся при наведении указателя мыши на ссылку. Здесь мы просто задаем другие цвета в свойствах border-left, background-color и color.

Вот как это будет выглядеть. По моему неплохо. Такое меню будет вполне работоспособно и при отключенной поддержке стилевого оформления.

Правда сразу оговорюсь, что для начала мы разберем скорее теоретические основы, поскольку существует браузер названИЕкоторого все знают. Нормальное решение основано на использовании автоматически генерируемого контента, а вышеупомянутый браузер (будем честными до конца – не только он один) не поддерживает эту возможность. Зато это прекрасно работает в Mozilla, FireFox, Netscape 6+, Opera и Safari. А затем разберем и универсальное решение. К сожалению не такое изящное.

Посмотрите на этот CSS-код:

ul {
  list-style:none;
  margin:0;
  padding:0 0 0 1em;
  text-indent:-1em;
}
li {
  width:20%;
  padding:0;
  margin:0 0 0.25em 0;
}
li:before {
  content:"\00BB \0020";
}

Для начала скрываем маркер списка, который имеется по умолчанию с помощью list-style:none; затем устанавливаем левый отступ 1em, но при этом сдвигаем текст влево на ту же величину, т.е. -1em для того, чтобы «вытолкнуть» стандартный маркер из блока элемента списка. С помощью псевдоэлемента :before генерируем текстовый маркер. В свойстве content нужные символы указаны с помощью шестнадцатеричного escape-эквивалента Unicode, как того требует спецификация CSS2.1. В примере сгенерирована последовательность символов из двойной стрелки-ёлочки и пробела. Изящно, просто и красиво, но не для IE …

… и решение, которое подойдет для всех браузеров. К сожалению, уже не такое красивое. Текстовый маркер придется просто вставлять перед каждым элементом списка. Как показано ниже:

<ul>
  <li>» Первый пункт списка</li>
  <li>» Второй пункт списка</li>
  <li>» Третий пункт списка</li>
  <li>» Четвертый пункт списка</li>
  <li>» Пятый пункт списка</li>
</ul>

а таблицу стилей для этого варианта надо немного изменить. Вот так:

ul {
  list-style:none;
  margin:0;
  padding:0 0 0 1em;
}
li {
  width:20%;
  padding:0;
  margin:0 0 0.25em 0;
}

Однако и в этом способе есть недостаток, правда не очень критический. Если в браузере пользователя отключена поддержка CSS, он увидит два маркера для каждого элемента списка – маркер, генерируемый браузером и маркер, который мы добавили вручную.

Разберем другой вопрос: как сделать маркер, используя картинку?

Для того, чтобы применить графический маркер используется свойство list-style-image, как показано в примере ниже

ul {
  list-style-type: disc;
  list-style-image: url(marker.png);
}

Свойство list-style-type используется здесь на всякий случай, если браузер пользователя не имеет возможности использовать изображение. А в свойстве list-style-image задается путь к нужной картинке. Управлять размером картинки, которая используется как маркер списка, из таблицы CSS мы не сможем и поэтому надо убедиться в том, что картинка имеет подходящие размеры. Еще один нюанс состоит в том, что значения графических маркеров наследуются и если Вы создаете вложенные списки и хотите отказаться от маркера изображения в них, надо опять использовать свойство list-style-image. Вот таким образом:

ul ul {
  list-style-image:none;
}

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

ul {
  margin-left:10px;
  padding-left:0px;
  list-style:none;
}
li {
  padding:0.5em 0 0.5em 54px;
  font: 1.3em/1.6 Verdana, Arial, sans-serif;
  background:url(bigMarker.png) no-repeat;
}

Сначала задаем значения и для левого поля и для левого отступа списка (почему именно так, я объяснял в одной из предыдущих статей). Потом удаляем маркер, используемый по умолчанию. Теперь главное: padding:0.5em 0 0.5em 54px; – мы освобождаем место слева от элемента списка, для того, чтобы вставить туда нашу большую картинку (например 54х54 пиксела), затем задаем свойство font таким образом, чтобы текст элемента списка не диссонировал с размером картинки-маркера и наконец используем свойство background, чтобы эту картинку вставить в качестве маркера списка.

Надеюсь, что это статья поможет кому-нибудь…

Решение в этом случае достаточно простое. При создании стилевого оформления списка надо просто учесть этот факт и задать оба свойства, например вот так:

ul {
  margin-left: 50px;
  padding-left: 0px;
}

Если же Вы попытаетесь разделить эти 50px между свойствами margin и padding, то отображение страницы в разных браузерах будет уже неодинаковым.
С одним вопросом немного разобрались. Теперь во всех браузерах отступы одинаковые, но вот как-то бедно выглядят эти списки. У одного в качестве маркера – закрашенный кружочек, у другого – ничем не примечательные цифры.

Возможно также создавать и свои собственные маркеры для списков, причем как текстовые, так и графические, но эти возможности мы рассмотрим отдельно.

Для того, чтобы поменять стандартный стиль списка, воспользуйтесь свойством list-style-type и Вы сможете изменить маркер или тип счетчика. Приведу возможные значения для ненумерованного списка.
disc – обычно по умолчанию. Закрашенный кружок.
circle – незакрашенный кружок.
square – закрашенный квадратик.
Т.е., если мы хотим вместо появляющегося по умолчанию закрашенного кружочка увидеть квадратик, пишем:

li {
  list-style-type: square;
}

Точно так же для нумерованного списка по умолчанию применяется значение decimal, т.е. начинается с 1, затем 2, 3 и так далее…
Приведу еще несколько возможных значений:
decimal-leading-zero – начинается с 01, потом идет 02, 03 и так далее. Количеству ведущих нулей может равняться числу значащих цифр. Например 0001 будет показан в списке из например 9999 элементов.
lower-roman – строчные римские цифры.
upper-roman – заглавные римские цифры.
lower-greek – начинается с букв греческого алфавита: альфа, бета, гамма и т.д. (не поддерживается в IE).
hebrew – начинается с традиционного иврита (не поддерживается в IE).
none – как же без этого – маркеры не отображаются.

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

<div id="header">
... какой-то заголовок или слоган ...
</div>
<div id="sidebar">
... здесь может быть меню сайта ...
</div>
<div id="content">
... здесь основное содержимое ...
</div>
<div id="info">
... дополнительная  информация ...
</div>

Вы можете посмотреть пример, того что получилось, и после этого разберем следующий CSS код.

body {
  margin:5px 0 0 5px;
  background-color:#000;
  background-image:url(flowers.jpg);
  background-position: top right;
  background-repeat:no-repeat;
  color:#fff;
}
#header {
  position:absolute;
  right:5%;
  top:10%;
  width:40%;
  font-weight:bold;
  font-size:1.4em;
}

#sidebar {
  position:absolute;
  left:35%;
  top:1%;
  width:65%;
  background-color:#333;
}
#content {
  position:absolute;
  left:5%;
  top:20%;
  width:45%;
}
#info {
  position:absolute;
  left:80%;
  width:20%;
  top:80%;
  background-color:#333;
}

Для размещения фонового изображения задаем значения в процентах, что позволит ему перемещаться вместе с содержимым страницы при изменении размеров окна браузера.
Далее мы используем свойство position, которому задаем значение absolute и определяем позицию элемента, задавая его положение (свойства top, left, right, bottom) опять же в процентах.
Еще легче создать несимметричный макет с фиксированным расположением элементов на странице. Используйте вместо относительных величин (проценты), абсолютные (например px).

<div id="viewPage">
  <div id="header">
  ... шапка страницы ...
  </div>
  <div id="frame">
    <div id="sidebar">
    ... колонка меню ...
    </div>
    <div id="content">
    ... основное содержимое страницы ...
    </div>
  </div>
  <div id="otherbar">
  ... колонка другого меню ...
  </div>
  <div id="footer">
  ... подвал ...
  </div>
</div>

Обратите внимание, что порядок следования элементов sidebar и content можно запросто изменить, если это необходимо с точки зрения SEO.

Легко можно заметить отличия от «резинового» макета. Во-первых мы заключили весь набор элементов в элемент div с идентификатором viewPage (не экономьте, не стоит использовать тут BODY, мало ли зачем он потом может пригодиться), а во-вторых заключили левую колонку и колонку с основным содержимым в еще один div с id=»frame».

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

#viewPage {
  width:870px;
  margin-left:30px;
}
#header {
  text-align:center;
  background-color:#FCF;
}
#sidebar {
  float:left;
  width:200px;
  background-color:#FFC;
}
#content {
  float:right;
  width:470px;
  background-color:#CCC;
}
#frame {
  float:left;
  width:700px;
}
#otherbar {
  float:right;
  width:140px;
  background-color:#FFC;
}
#footer {
  clear:both;
  paddin-top:1em;
  text-align:center;
  background-color:#CFF;
}

Для начала задаем общую ширину страницы равную 870px, используя для этого элемент с id=»viewPage» + отступ от левого края окна браузера в 30px. В элементе header комментировать в общем нечего. Далее задаем фиксированную ширину для элементов sidebar в 200px и content в 470px и выравниваем их в потоке плавающей модели соответственно по левому и правому краю. Обратите внимание, что общая их ширина 200 + 470 = 670px меньше ширины их родительского элемента frame. Как говорится, на всякий случай…

Далее включаем в поток плавающей модели элементы frame (вот для чего он и нужен был!) и otherbar, выравнивая frame по левому, а otherbar по правому краю. Ситуация с суммой горизонтальных размеров блоков здесь такая же – есть запас в 30px (это не догма – можете и не оставлять запас, если уверены).

Hаконец элемент footer мы исключаем из плавающей модели с помощью clear:both; и на этом верстка собственно каркаса закончена. Да, разный бэкграунд для элементов я задаю исключительно для наглядности примера.

<div id="header">
... шапка страницы ...
</div>
<div id="sidebar">
... колонка меню ...
</div>
<div id="content">
... основное содержимое страницы ...
</div>
<div id="otherbar">
... колонка меню ...
</div>
<div id="footer">
... подвал ...
</div>

и отформатируем ее с помощью следующей таблицы стилей:

#content {
  float:left;
  width:50%;
  background-color:#CCC;
}
#sidebar {
  float:left;
  width:30%;
  background-color:#FFC;
}
#otherbar {
  float:left;
  width:20%;
  background-color:#FFC;
}
#header {
  background-color:#FCF;
  text-align:center;
}
#footer {
  clear:both;
  text-align:center;
  background-color:#CFF;
}

В этом решении все три колонки включены в плавающую модель, выравниваются по левому краю и суммарная их ширина не превышает 100%.

Однако следует очень внимательно относиться к полям, рамкам и отступам этих элементов, поскольку, если суммарная ширина колонок превысит 100%, то одна или две колонки будут расположены друг под другом.

Вот так легко и просто. Этот метод работает во всех популярных браузерах.