Блог им. 3ds / Колонки одинаковой высоты + border-bottom!


Begin

На хабре наверно уже миллион статей про колонки одинаковой высоты. Вы спросите зачем нам нужна еще одна статья в 1001й раз?

Вот в чем затык

Проблема в том, что колонки одинаковой высоты с нижней границей — не так то просто сделать… В основном, я использую метод с padding-ами, т.е. ставим:
.column {   padding-bottom: 32750px;   margin-bottom: -32750px; } * This source code was highlighted with Source Code Highlighter.
для колонок, которые должны быть одинаковой высоты, и помещаем эти колонки во враппер с overflow: hidden. НО! При этом нельзя задать нижнюю границу для колонок!

Решение

Все очень просто, надо обернуть враппер еще раз и внешнему указать
#container {   background:transparent url(images/example-6.gif) no-repeat scroll center bottom;   float:left;   padding-bottom:1px; } * This source code was highlighted with Source Code Highlighter.
Мы просто указали фоновую картинку для внешнего враппера, на которой изображены границы :). Мне в текущем проекте очень помогло. Если есть еще варианты без js буду рад узнать их. Ну я думаю вам станет понятней, если посмотреть на пример: www.ejeliot.com/samples/equal-height-columns/example-6.html Материал нашел здесь: www.ejeliot.com/blog/61

Источник: Уроки CSS на Хабрахабре


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


25 июня 2009  1 3 640   Версия для печати


Похожие публикации

Блог им. smashercosmo / Кроссбраузерная вёрстка отформатированного кода

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

Блог им. RayZ / Задача: Кнопки в Internet Explorer и волшебные пространства

Столкнулся с проблемой укрощения кнопок под Internet Explorer. Для наглядности имеем следующий код: <html>   <style type="text/css">     .hacked {       width:auto;... читать далее

Немного о CSS свойством «background-image»

CSS свойство « background-image » служит для заливки чего-либо (блока, ячейки таблицы, страницы целиком) фоновым рисунком. Что можно сделать, используя это свойство?... читать далее

Скругленные границы через CSS

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

Блог им. ekwo / Привязываем иконку к каждому типу файлов на CSS

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

как создавать очень красивые и удобные текстовые кнопки

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

Комментарии (1)

  1. #1 написал: ямс
    Группа: Гости
    29 октября 2012 21:24

    спасиб, помогло)
    • 0

       

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте