Блоки

[Dayks]

Помогите пожалуйста реализовать такое размещение блоков

Тут:

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

Да, забыл нарисовать - зеленый и красный блок находятся в одном общем блоке GENERAL соответственно с непостоянной высотой, но постоянной шириной.

Вот что делал я и оно не работает как надо - зеленый блок не равный по высоте красному и желтый блок не в самом низу.

.general {
	margin-bottom:10px;
}
.red {
	float:left;
	background:white;
	width:700px;
}
.green {
	display:inline;
	float:left;
	width:76px;
	height:100%;
}
.yellow {
	float:left;
	margin-bottom:0;
	width:76px;
}

Буду очень признателен Вашей помощи.

[Great Rash]

Если нужна поддержка ИЕ7, то используйте таблицу. Если поддержка ИЕ7 не нужна, то используйте display: table; + display: table-cell;

[Dayks]

а иначе никак? Не могу понять почему для зеленого блока не работает height:100%; при том, что width:100%; работает (я экспериментировал), а margin-bottom:0; вообще никогда нигде не работает.

[Great Rash]

height: 100%; не работает потому, что ей не от чего брать эти самые проценты. Нужно чтобы у родителя была задана высота. К сожалению, это один из самых больших недостатков современного CSS. Задавать конкретную высоту для .general вы не можете, потому что не знаете сколько у вас будет контента.

margin-bottom задает поле снизу под элементом. В вашем случае это свойство вообще не при чем.

Вывод: по-другому никак.

[gordi]

Разберите пример - http://csslayout.ru/i/layout/floatmp/cr_shablon_01.html

Должно помочь

[Dayks]

очень запутанный пример. Но все равно не подходит. Мне необходимо чтобы блоков GENERAL (в моем примере) было 10 штук на странице, и в каждом было такое расположение красного, зеленого и желтого блоков. В Вашем примере продублировал блоки CONTENT и RIGHT несколько раз, так внутренний правый нижний блок остался только в самом последнем (в самом нижнем) блоке RIGHT, в остальных его нету. И я не могу понять что такое

margin-bottom:-32600px;
padding-bottom:32600px;

[gordi]

Ну если 10 блоков

Тогда сюда - http://csslayout.ru/layout/float/float6.htm

Пример "Идеальный Float - бонус"

Под 2 колоночный допилите.

margin-bottom:-32600px;
padding-bottom:32600px;

Данные стилевые правила создают иллюзию равной высоты колонок.

[logicface]

А если поместить красный и зеленый блок в другой блок с параметром overflow:hidden который будет растягиваться в зависимости от содержимого красного и зеленого блока, тогда ведь можно будет задать зеленому блоку height:100%?

Edited November 7, 2012 by logicface

[Dayks]

А если поместить красный и зеленый блок в другой блок с параметром overflow:hidden который будет растягиваться в зависимости от содержимого красного и зеленого блока, тогда ведь можно будет задать зеленому блоку height:100%?

Добавил блоку general параметр overflow:hidden, ничего не изменилось.

[Dayks]

Помог совет gordi, но пришлось очень долго оптимизировать их код. То, что они посчитали упрощением я считаю захламлением кода. Ведь описывать каждый бордер элемента (верх/справа/низ/слева) в разных местах - это что-то с чем-то. И это только один пример

Edited November 7, 2012 by Dayks

[iDrugov]

html, body
{
position: absolute;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}

А дальше ваши div'ы будут верстать на 100% высоты и ширины без проблем

<div style="position: absolute; height: 100%; width: 100%; backgroung: #000;">

[gordi]

Помог совет gordi, но пришлось очень долго оптимизировать их код. То, что они посчитали упрощением я считаю захламлением кода. Ведь описывать каждый бордер элемента (верх/справа/низ/слева) в разных местах - это что-то с чем-то. И это только один пример

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