Горизонтальное меню и высота ячейки

Привет. Столкнулся с такой проблемой. ХЗ как решить, аж стыдно
И найти в инете не могу, или сформулировать правильно не могу запрос в поисковике.
В общем вот:

ссылка

Меню посередине. Надо чтобы если ячейка слева больше, то и та, что справа должна быть ее высотой, а текст вертикально по середине.

Цитата ("Hungry_Hunter"):

http://habrahabr.ru/post/148327/

Да, но у меня блоки тянуться по горизонтали. в 1 строку 2 штуки по 45%, а следующие уже ниже. А перенести на новую строку не выходит этимим способавми

А никак.....таблица или скрипты

Вот так можно подобное сделать.

li {

	border: 1px solid #000000;

}

...

<div style="display: table; width: 200px;">

	<ul style="display: table-row">

		<li style="display: table-cell">display: table-cell and some more content</li>

		<li style="display: table-cell">display: table-cell</li>

	</ul>

	<ul style="display: table-row">

		<li style="display: table-cell">display: table-cell</li>

		<li style="display: table-cell">display: table-cell</li>

	</ul>

</div>

Фон, персиковую полоску слева, левую и правую границы - приписать к родительскому слою. Разделительную границу - к верху каждого пункта.