height:100%

Дочернему ставь height 100%
Сорри не успел...

при большой вложенности кроссбраузерность страдает.

В ФФ добился нужного результата при помощи overflow: hidden
В Хроме, Сафари все нормально.
Страдают как обычно IE, причем все 6-8 и почему то Опера.

Ну ни как они не хочет нормально воспринимать height: 100%

Дивы дочерние флоатятся, думаю может из-за этого.

Может кто подкинет мыслей, как побороться

В общем не справился. Прошу помощи.

Вот принцип макета.


Необходимо чтобы красные блоки принимали высоту "правого блока".
Причем "левый блок" колонка равен "правому блоку" по высоте (не фиксированная, а сделано table-cell).

Подскажите хотя бы в какую сторону копать и как построить каркас.

Верстка дивовая(без таблиц!!!), резиновая (бг картинкой с фоном не получится), без експрешенов и JS(соответственно jquery).

Уперся ни как не могу сделать.

ПС. Смог побороть эту задачу(в ФФ) выставив всем дивам левого блока height:100%. В ФФ, Сафари и Хроме все нормально. В ИЕ 6-8 и в Опере не прокатывает.

ПС2. есть код на скорую руку без картиноки всякого хлама

div.table{height:0;}
div.tr{height:0;}
/* не для IE */
div.table[class] {height:auto; display: table;}
div.tr[class] { height:auto; display: table-row;}
div.td[class] {float:none; display: table-cell;}

div.td{height: 100%; float: left;}

#first{position:relative; z-index:1; width:60%; background:url(images/bg_content_dog.jpg) #fff no-repeat left top; position:relative; margin-top: -1px;}
#second{width:40%; background: url(images/bg_right_content.jpg) #f5f5f5 repeat-x top left;}
/* не для IE */
#second[id]{width:auto;  margin:0; padding:0;}
</style>

<div id="conteiner" class="table">
	<div class="td" id='col1'>
		<div style="height: 290px; background: #0000FF; width: 100%">height: 290px; background: #0000FF; width: 100%</div>
	
		<div style="width: 145px; float: left; background:#FFFF00;" >width: 145px;<br> height: 100%;<br> float: left;<br> background:#FFFF00;</div>
		<div style="margin-left: 145px; height: 100%;" id="a1">
			<div style="height: 50px; width: 100%; background: #00FFFF;" >height: 50px; width: 100%;</div>

			<div style="height: 100%; background:#66FF00; float: left; width: 60%;"  >height: 100%;<br> background:#66FF00;<br> float: left;<br> width: 60%;</div>
			<div style=" height: 100%; background: #999999; margin-left: 60%;">height: 100%;<br /> background:#999999;<br /> margin-left: 61%;</div>
		</div>
	</div>

	<div class="td" style="width: 29%; vertical-align:top; height: 700px;" id="right">
		<div style="min-height: 700px !important; height: 700px; background: #99CC33">
			
		</div>
	</div>
</div>

*сорри что грязный

Прошу помощи((