Скрипт, который задает высоту?

[faynoit]

Здравствуйте. Есть такой пример

http://prntscr.com/29by64

 

Пытаюсь его сверстать так:

<section id="center-menu">	<div id="menu1">		<h2>Нестандартные изделия</h2>		<ul>			<li><a href="#">Кухни</a></li>			<li><a href="#">Лестницы</a></li>			<li><a href="#">Изделия из искусственного камня</a></li>			<li><a href="#">Барные стойки и ресепшены</a></li>		</ul>	</div>	<div id="menu2">		<h2>Офисная мебель</h2>		<ul>			<li><a href="#">Мебель для персонала</a></li>			<li><a href="#">Кабинеты</a></li>			<li><a href="#">Офисные кресла и стулья</a></li>			<li><a href="#">Переговорные</a></li>			<li><a href="#">Приемные</a></li>			<li><a href="#">Мягкая мебель</a></li>		</ul>	</div></section>

#center-menu {width: 960px; background: url(../images/center-menu-bg.jpg); box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.25); border: 1px solid #e7e7e7;}#center-menu div {display: inline-block; vertical-align: top;}#center-menu h2 {font-size: 24px; color: #ff562f; margin-bottom: 20px;}#center-menu li a {color: #4b4b4b; font-size: 14px; line-height: 30px;}#center-menu #menu1 {margin: 70px 0 0 85px;}#center-menu #menu2 {margin: 70px 0 0 185px;} 

Получается так:

http://prntscr.com/29bxzu

 

1. Можно ли решить этот вопрос с помощью просто css

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

 

Проблема в том, что пункты меню должны работать по приницпу, "что не влезло по высоте, то переходит направо"

[Z1gnet]

Проблема в том, что пункты меню должны работать по приницпу, "что не влезло по высоте, то переходит направо"

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

[swandev]

http://joxi.ru/0hmjUtg5CbCWWnLY4N8

[faynoit]

Делаю у ul foat:left; и задаю высоту 100px, например. и ничего не происходит

[swandev]

Делаю у ul foat:left; и задаю высоту 100px, например. и ничего не происходит

Покажите пример ( jsbin.com, jsfiddle.net ).

 

 

p.s У контента который может добавляться/изменяться, никогда не задавайте ширину

[faynoit]

http://jsbin.com/iJucaJa/1/

[npofopr]

поищите по запросу: "equal height columns". 

или "колонки одинаковой высоты". 

По 1 запросу сразу и скрипт найдете.

[Radiocity]

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks Edited December 7, 2013 by Radiocity

[Zverushka]

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

[faynoit]

Сейчас главное, чтобы список второго столбца автоматически переходил вправо, если пункты не влазят в заданную высоту

[Radiocity]

Float не используется. Задайте inline-block для div, ul, li.

[faynoit]

не помагает

[Zverushka]

Мне кажется тут либо сложный javascript - поискать кстати можно - либо новое свойство css3 - количество колонок. http://jsfiddle.net/cJ8MV/37/ Проблема в том, что поддержка браузерами невысокая  http://caniuse.com/#search=colum

Edited December 7, 2013 by Zverushka

[Radiocity]

http://jsfiddle.net/fyT7z/

Edited December 7, 2013 by Radiocity

[Z1gnet]

Сейчас главное, чтобы список второго столбца автоматически переходил вправо, если пункты не влазят в заданную высоту

еще раз говорю, вы тут не правы. не так у вас должно работать, вы все слишком пытаетесь усложнить! @Radiocity, все правильно написал, сделайте по типу как он выложил тут

http://jsfiddle.net/fyT7z/

[faynoit]

А в чем усложнение? Просто я немного не понимаю как подобное должно верстаться, до этого верстал только один столбец