Как сделать 3 блока "одинаковой высоты"?

[E5000]

Есть вот такой код:

<div style="width: 108px; height: 100px;">

<div style="background-color:lime; width: 4px; height: inherit; float: left;">1</div>
<div style="background-color:lime; width: 4px; height: inherit; float: right;">2</div>
<div style="background-color:blue; width: 100px; margin-left: 4px; margin-right: 4px;">
	asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>
</div>

</div>

хочется, чтобы блоки "1" и "2" занимали точно такую же высоту, какую занимает синий блок с "контентом".

Цель этого: контент, и по бокам нужны фоновые виньетки. Ширина контентового блока указывается явно, но блоков не один и ширина у них у всех - разная.

Edited June 26, 2011 by E5000

[sigma77]

А это что ещё за зверь? )

В css3 есть возможность задавать несколько фоновых изображений одному элементу - http://jsfiddle.net/rbfmr/4/

http://dev.w3.org/csswg/css3-background/#layering

[E5000]

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

А почему же оно даёт-то так? Не могу никак понять) Вроде просто задание минимального размера, т.е. как минимум размер считать таким ... но как же он понимает какой теперь стал полный размер высоты?)

sigma77

Вау) Здорово! Спасибо ещё раз!

PS и чего же у меня нет права ставить плюсы вам. Плюсовал бы и плюсовал.

[psywalker]

Как что? Во-первый блок у нас фикс. Во-вторых такие вещи легко делаются одной картинкой, и с одним блоком, без обёрток. В-третьих мы просто делаем полоску пнг, на разных сторонах которой будут наши картинки, и растягиваем её по оси-y, и всё.

Не. Без обёрток не обойтись. Блоки могут быть различной ширины. Т.е. Один блок - 200px, другой такой же, но 300.

п.с. Ну если только на ИЕ забить. Тогда множественным бекграундом можно разрулить.

Ааа, если резина, тогда твой варинат решения самый нормальный. Я бы делал так же.

[Softlink]

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

А почему же оно даёт-то так? Не могу никак понять) Вроде просто задание минимального размера, т.е. как минимум размер считать таким ... но как же он понимает какой теперь стал полный размер высоты?)

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

[gart]

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

А почему же оно даёт-то так? Не могу никак понять) Вроде просто задание минимального размера, т.е. как минимум размер считать таким ... но как же он понимает какой теперь стал полный размер высоты?)

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

почему же не будет? нужны картинки - мультиплай бекграунд и все проблемы. Либо, если критичны старые браузеры, как девушка описывала выше, основному справа поставить картинку.

[Softlink]

почему же не будет? нужны картинки - мультиплай бекграунд и все проблемы.

на КСС3 заработает, а как вы по флангам развешаете картинки в родителе?

Либо, если критичны старые браузеры, как девушка описывала выше, основному справа поставить картинку.

получится именно то, что сделала sigma77

[gart]

почему же не будет? нужны картинки - мультиплай бекграунд и все проблемы.

на КСС3 заработает, а как вы по флангам развешаете картинки в родителе?

background-image: url(1.png), url(2.png);
background-position: left, right;
background-repeat: repeat-y;

нужно же пропагандировать

Edited June 27, 2011 by gart

[E5000]

А как с поддержкой CSS3 у современных браузеров?) Ие, как всегда в пролёте да?) Хотя бы ИЕ8 поддерживает CSS3 или тоже в пролёте?)

[psywalker]

А как с поддержкой CSS3 у современных браузеров?) Ие, как всегда в пролёте да?) Хотя бы ИЕ8 поддерживает CSS3 или тоже в пролёте?)

В пролёте)

[SelenIT]

IE5.5-8 умеет 2 фона (через фильтр AlphaImageLoader), но второй фон не способен размножаться, может только обрезаться либо растягиваться (если очень прижмет, можно сделать картинку длинной полосой с разумным запасом). IE8 может хотя бы так. Но вообще не стоит заводить пустые элементы (даже псевдо-) ради визуальных украшений без крайней на то нужды, это пережиток лихих 90-х и рискованный шаг вбок от правильного пути, который указала sigma77.

[E5000]

Но вообще не стоит заводить пустые элементы (даже псевдо-) ради визуальных украшений без крайней на то нужды, это пережиток лихих 90-х и рискованный шаг вбок от правильного пути, который указала sigma77.

А что же плохого в красивом оформлении материала?

[SelenIT]

В красивом оформлении ничего плохого нет. Но не надо думать о каждом чисто декоративном элементе (всякие тени, рамочки, маркеры, "отбивки" с орнаментом и т.п.) как об отдельном блоке. Блок — это часть содержания, а визуального "мусора" в разметке должно быть как можно меньше (в идеале — ноль). Оформлять надо стилями. Сначала нужно повнимательнее присмотреться к блокам с контентом — почти наверняка как минимум половину этой красоты можно без потерь возложить на них. И лишь для оставшейся половины, когда иначе совсем никак, можно "пойти на сделку с совестью" и добавить пустой блок в разметку...

[E5000]

Аа, вы в этом смысле. Согласен!