Растянуть div вертикально, когда неизвестна высота родителя.

[Curly-fingers]

Здравствуйте.
Моя задача: есть готовая верстка на таблицах, а нужно переверстать на дивах.
Оформление сайта основано на визуальных блоках, которые состоят из таблицы с ячейками 3х3. Эта таблица создает эффект скругленных углов, а сам контент находиться в ячейке 2х2. По мере наполнения контентом ячейки, остальные (вертикальные 2х1 и 2х3) растягиваются по вертикали вместе с контентом. В случае с дивами, на плавающий див слева и справа от контента не растягивается относительно контента даже если min-height: 100%, т.к. реальная высота родительского дива неизвестна. Надеюсь понятно описал.
Да и еще пробовал вариант с display: table, -cell, -row, получается не кроссбраузерно.
Если есть идеи как растянуть вертикально див, поделитесь пожалуйста.
Во вложении изображение как сейчас сделано.

	<!-- реализация на div -->
	<div id="topheader">
		<div class="top" style="clear: both;">
			<div style="width: 20px; height: 20px; float: left;"></div>
			<div style="width: 940px; height: 20px; float: left;"></div>
			<div style="width: 20px; height: 20px; float: left;"></div>
		</div>
		<div class="middle" style="clear: both;">
			<div style="width: 20px; height: 100%; float: left; background-color: #F00;"></div>
			<div style="width: 934px; min-height: 100%; height: 100%; background-color: #333; float: left; margin: 3px;">
				<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
			</div>
			<div style="width: 20px; height: 100%; float: left; background-color: #F00;"></div>
		</div>
		<div class="bottom" style="clear: both;">
			<div style="width: 20px; height: 20px; float: left;"></div>
			<div style="width: 940px; height: 20px; float: left;"></div>
			<div style="width: 20px; height: 20px; float: left;"></div>
		</div>
	</div>

 

[akxxiv]

javascript?

 

[akxxiv]

Хм. Клево. В этой версии форума я опять новичок )))

 

[varan]

думаю, никак

Попробуйте вложенные дивы
<div class="corner1">
<div class="corner2">
<div class="corner3">
content
</div>
</div>
</div>
и туда фоновыми картинками фигачить нужные картинки. Часто картинку угла совмещают с очень длинным бордером

Вообще, в гугле можно найти кучу вариантов закруглений

 

[флоппик]

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

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

 

[Curly-fingers]

javascript?

Нашел полезную статью http://www.master-web.info/equal-height-css-columns/ о том как грамотно сделать это на JS. Мне хотелось что бы использовать только CCS.

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

т.е. если бы дивы не были бы плавающими, есть возможность height: 100%? Сейчас сам попробую и отпишу.

 

[Curly-fingers]

А-а-а-а! Получилось! Парни вы мне очень помогли все. Спасибо огромное. Решение:

<div class="middle" style="clear: both;">
	<div style="width: 980px; background-image: url(images/table_left.jpg); background-repeat: repeat-y; background-position:left;">
		<div style="width: 980px; background-image: url(images/table_right.jpg); background-repeat: repeat-y; background-position:right;">
			<div class="myContent" style="width: 934px; background-color: #333; position: relative; margin: auto;">
				<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
			</div>
		 </div>
	</div>
</div>

 

[varan]

такие конструкции как

background-image: url(images/table_left.jpg); background-repeat: repeat-y; background-position:left;

можно сократить до
background: url(images/table_left.jpg) repeat-y left

 

[Curly-fingers]

спасибо, я в курсе, но сколько не старался писать кратко, все равно очевиднее для меня описывать все отдельно.