Вёрстка макета.

[Atilla]

Появились проблемы при вёрстке следующего макета:

Красный блок (тот что сверху) обладает фиксированной высотой в 200px и шириной в 100% от окна броузера. С этим блоком проблем нет.

Проблемы появляются при верстке зелёного блока. Ширина зависит от содержимого. Высота тоже зависит от содержимого, но минимум его высота должна быть равна высоте окна броузера за вычетом 200px - высоты красного блока.

И всё совсем грустно с синим блоком. Его ширина должна быть равна ширине окна броузера за вычетом ширины зелёного (который в свою очередь зависит от содержимого). Высота зависит от содержимого, но минимум должна быть равна высоте окна броузера за вычетом 200px - высоты красного блока.

Как это всё можно сверстать без таблиц?

[Tsybin]

float: left, margin, установка min-height и min-width не помогает?

Edited November 13, 2012 by Tsybin

[newtvis]

Я нашел только один способ:

HTML:

<div class="wrap">
	<div class="red"></div>
	<div class="green"></div>
	<div class="blue"></div>
</div>

CSS:

                * {
			margin:0;
			padding:0;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}

		html, body {
			height:100%;
		}

		.wrap {
			min-height: 100%;
			height: auto !important;
			height:100%;
			position: relative;
		}		

		.red {
			background: red;
			width:100%;
			height:200px;
			position: absolute;
			top:0;
			left:0;
			z-index: 1;
		}

		.green {
			background: green;
			width: 35%;
			height:100%;
			position: absolute;
			top:0;
			left:0;
			padding-top: 200px;
		}

		.blue {
			background: blue;
			width:65%;
			height:100%;
			position: absolute;
			top:0;
			right:0;
			padding-top: 200px;
		}

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

P.S. А вообще не рекомендую такую верстку =)

Edited November 14, 2012 by newtvis

[gordi]

Если для левой колонки не принципиально иметь плавающую ширину и не нужен footer

то можно и так http://csslayout.ru/i/layout/absolute/absolutelc_hh.html