float:left блоки равной высоты в несколько строк

[AKyHuH]

Добрый день, уважаемые форумчане!

Делаю сайт, левая колонка фиксированной ширины, правая (контент) резиновая. В правой колонке выводится список изображений с заголовками:

css:

.img {

width: 200px;

float: left;

margin: 0 10px 10px 0;

}

html:

<div class="img">

<img src="image.jpg" alt="" />

<h3>Title</h3>

</div>

<div class="img">

<img src="image1.jpg" alt="" />

<h3>Title</h3>

</div>

...

<div class="img">

<img src="imageN.jpg" alt="" />

<h3>Title</h3>

</div>

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

Edited January 12, 2010 by AKyHuH

[AKyHuH]

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

Да, и подскажите, пожалуйста, для чего нужна эта строка: display: -moz-inline-stack; я так понимаю это правило для FF, но ведь он и так адекватно воспринимает свойство инлайн-блок...

[psywalker]

Ладно, если не понял, объясните плз

Человек сказал, что у него верстка сыпется из-за появления второй строки заголовка в блоке, я подумал что вполне хорошим решением будет скрыть то, что вылазит за объемы блока.

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

		width: 200px;
		min-height: 250px;
		border: 1px solid #000;
		display: -moz-inline-stack;
		display: inline-block;
		vertical-align: top;
		margin: 5px;
		zoom: 1;
		*display: inline;
		_height: 250px;

Как будет выглядеть:

ПС: надеюсь в этот раз предложил правильное решение

Дело в том, что я в одном из постов предлагал такое же))

[mishka]

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

Тебе колонки надо тянуть по самой высокой? Или их высота жестко заданна? Также ширины их тянутся или жестко заданны?

[psywalker]

Тебе колонки надо тянуть по самой высокой? Или их высота жестко заданна? Также ширины их тянутся или жестко заданны?

По самой высокой, высота может быть разная.

[AKyHuH]

ширина задана жестко, а высоту надо тянуть по самой высокой

[psywalker]

ширина задана жестко, а высоту надо тянуть по самой высокой

Хочу заметить, то что я предложил идею с JS, это как раз решение Медведя, как то раз было дело...

[mishka]

ширина задана жестко, а высоту надо тянуть по самой высокой

И при этом еще чтобы колонка которая невлезла переносилась на новую строку?

Тогда джс.

Хочу заметить, то что я предложил идею с JS, это как раз решение Медведя, как то раз было дело...

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

[AKyHuH]

psywalker, в общем-то решение подошло, спасибо большое!

остальным тоже спасибо за участие, если будут ещё варианты, с радостью посмотрю, т.к. может быть по глупым, но всё-таки убеждениям весь файл css стилей писал без inline-block, который неадекватно воспринимается старыми браузерами... но.... на безрыбье, как говорится...

И при этом еще чтобы колонка которая невлезла переносилась на новую строку?

Тогда джс.

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

отнюдь, psywalker предложил вполне приличный вариант без JS... конечно, если бы блоки были с фоном... но, у меня, слава богу, фона нет

[mishka]

отнюдь, psywalker предложил вполне приличный вариант без JS... конечно, если бы блоки были с фоном... но, у меня, слава богу, фона нет

Если фона нет то тогда другое дело.

Но я чтото путаю или тут были разговоры по поводу бг в колонках?

Edited January 12, 2010 by mishka2

[psywalker]

Если фона нет то тогда другое дело.

Но я чтото путаю или тут были разговоры по поводу бг в колонках?

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

[AKyHuH]

Дабы не захламлять форум, задам свой новый вопрос тут

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

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

[psywalker]

Дабы не захламлять форум, задам свой новый вопрос тут

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	*{ margin: 0; padding: 0; }
	div.left{ float: left; width: 300px; background: blue;}
	div.right { margin-left: 300px; background: red;}
</style>
</head>

<body>
<div class="left">Left</div>
<div class="right">Right</div>
</body>
</html>

[rus]

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

[AKyHuH]

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

[Azadi]

AKyHuH, посмотри как http://www.w3.org/ сверстано

[Justnewone]

AKyHuH, посмотри как http://www.w3.org/ сверстано

о как!

#w3c_container {

font-size:108%;

line-height:1.41667;

}

advanced (строка 15)

[AKyHuH]

AKyHuH, посмотри как http://www.w3.org/ сверстано

ага, круто это типа так Лужков отвечает, когда к нему прорабы приходят и говорят "насяльника, так строить нивазможнама", а он говорит "посмотрите, как Бог за 7 дней построил"

о как!

#w3c_container {

font-size:108%;

line-height:1.41667;

}

advanced (строка 15)

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

[rash]

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

Неа, media-queries :-)

[AKyHuH]

Неа, media-queries :-)

хм... ксс3... я пока вообще плохо себе представляю где это работает, а где нет...

[rash]

хм... ксс3... я пока вообще плохо себе представляю где это работает, а где нет...

Совсем не работают media-queries сейчас только в ИЕ.

[Azadi]

ага, круто это типа так Лужков отвечает, когда к нему прорабы приходят и говорят "насяльника, так строить нивазможнама", а он говорит "посмотрите, как Бог за 7 дней построил"

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