Подскажите по вёрстке 2х блоков

xtr · May 11, 2012

Есть 2 колонки right и left

В каждой из них находится по блоку right1 и left2 соответственно

в исходном положении это выглядит примерно:

при раскрытии контента в right1 блок увеличивается по высоте (там аккордеон)

Соответственно это выглядит:

в результате нужно , что бы при "раскрытии" right1 - left1 стремился к низу, ну скажем к футеру.

Так никак не получается сделать, т.к. если ставишь везде высоту 100% то блок растягивается на экран, а если контента больше чем на экран всё остаётся как на 2й картинке.

Поможите советом как реализовать???

Softlink · May 11, 2012

Тестовый пример куда-нибудь выложите, так сложно что-то понять\объяснить.

xtr · May 11, 2012

В плане разметки и стилей?

xtr · May 11, 2012

<body>
<div class="main">
	<div class="left_col">
		<div class="left1"></div>
		<div class="left2"></div>
	<div class="right_col">
		<div class="right1"></div>
		<div class="right2"></div>
		<div class="right3"></div>
	</div>
	<div class="footer"></div>
</div>
</body>





.main{margin: 0 auto; width: 960px;background:#ffffff;}
.left_col {height:100%; width:366px;background:#ffffff;float:left;}
.left1 {height:462px; width:366px;position:relative;}
.left2 {height:371px; width:366px;margin:auto 0;}
.right_col {height:100%; width:590px;float:left;}
.right1{height:230px; width:590px;float:right;}
.right2{}
.right3{height:95px; width:590px;float:right;}

Примерно так.

Надо чтобы при увеличении right2 менялся, а точнее стремился к футеру left2. что бы их нижние границы были у футера в общем... В данный момент так не получается... Так же внутри left1 left2 right1 right2 right3 есть контент, его сюда не выкладывал ибо много получится.

Edited May 11, 2012 by xtr

xtr · May 12, 2012

Всё, вопрос снят. За неимением ответа решил проблемму другим путём.

Sign In

Подскажите по вёрстке 2х блоков

Question

xtr

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Softlink

Link to comment

Share on other sites

xtr

Link to comment

Share on other sites

xtr

Link to comment

Share on other sites

xtr

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information