Прижать div к низу блока

[Destroyer]

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

 

Т.е. по сути, как в таблице,если бы ячейке с блоком прописал бы vertical-align:bottom; Высота обеих блоков динамичная.

 

Верстка следующая:

 

        <div class="textin">			<div class="left">			<div class="left-in">				Текст					</div>						<div class="menu-cat">				<a href="" class="cat1">Каталог продукции на сайте</a>				<a href="" class="cat2">Наше производство</a>				<a href="" class="cat3">Программа подбора оборудования</a>				<a href="" class="cat2">Печатный каталог и прайс-лист</a>				<a href="" class="cat1">Каталог продукции в PDF</a>			</div>		</div>				<div class="right">					<h1>Каталог</h1>				<p>текст</p>				</div>	</div>

Прижать нужно .menu-cat

Примерно представляю,что нужно задать .textin {display:table}

.left {display:table-cell}
.right {displayy:table-cell}
.menu-cat {dispaly:table-cell; vertical-align:bottom;}

но на деле ничего это не дает
 

[Destroyer]

Сделал с помощью граблей.

Создал прообраз таблицы на основе дивов, задав table, table-row, table-cell

 

Левой колонке задал vertical-align:bottom;

 

А т.к. мне нужно ,чтобы первый левый блок был в самом вверху,а второй в самом низу, я задал первому блоку: position:absolute; top:0;

 

И всё стало как надо! Без псевдотаблицы никакие абсолюты и bottom:0 не помогали, т.к. у колонок не было фиксированной высоты

[Shift-Web]

  On 12/7/2015 at 10:42 AM, Destroyer said:

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

 

Т.е. по сути, как в таблице,если бы ячейке с блоком прописал бы vertical-align:bottom; Высота обеих блоков динамичная.

 

Верстка следующая:

 

        <div class="textin">			<div class="left">			<div class="left-in">				Текст					</div>						<div class="menu-cat">				<a href="" class="cat1">Каталог продукции на сайте</a>				<a href="" class="cat2">Наше производство</a>				<a href="" class="cat3">Программа подбора оборудования</a>				<a href="" class="cat2">Печатный каталог и прайс-лист</a>				<a href="" class="cat1">Каталог продукции в PDF</a>			</div>		</div>				<div class="right">					<h1>Каталог</h1>				<p>текст</p>				</div>	</div>

Прижать нужно .menu-cat

Примерно представляю,что нужно задать .textin {display:table}

.left {display:table-cell}

.right {displayy:table-cell}

.menu-cat {dispaly:table-cell; vertical-align:bottom;}

но на деле ничего это не дает

 

 

 

скорее .left { position: relative; padding-bottom: .menu-cat-height }; .menu-cat { position: absolute; bottom: 0 }

[Destroyer]

padding-bottom: .menu-cat-height

А что за параметр такой странный? Хром на него ругается

 

При таком стиле .menu-cat { position: absolute; bottom: 0 }

.left { position: relative; padding-bottom: .menu-cat-height };

 

Нужный блок просто уходит вверх и закрывает другие блоки

[Shift-Web]

ну вот сделайте bottom такой какой нужно и padding не забудьте отрегулировать

[Igor Schnaider]

Высота .menu-cat, как я понял, тоже варьируется?

Может вам на flex лучше сделать, вместе таблиц.