Ширина одного блока зависящая от присутствия соседнего блока

[AndreyB]

Приветсвую.

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

Все блоки не имеют фиксированой высоты, ширина блоков изначально одинаковая, во всех блоках текстовое содержимое.

Встала следующая задача:

При отсутствии блока №2 на его место встает блок №3. а место 3го блока заполняет блок №4 и его дочерние блоки встают горизонтально.

Проблема в 4м блоке, не получается оперировать расположением внутренних блоков и самим 4м блоком.

Подскажите пожалуйста как решить задачу.

На кодпене пытаюсь реализовать, CodePen, у класса .div2 стоит display: none; поставьте block и увидите что 4й блок не уменьшается.

Edited August 12, 2013 by AndreyB

[SelenIT]

Так?

[AndreyB]

  On 8/12/2013 at 6:58 PM, SelenIT said:

Так?

Да, спасибо огромное. Я так понял что средствами CSS это не сделать.

[wwt]

  On 8/12/2013 at 7:20 PM, AndreyB said:

  On 8/12/2013 at 6:58 PM, SelenIT said:

Так?

Да, спасибо огромное. Я так понял что средствами CSS это не сделать.

SelenIT вам и показал с помощью CSS, а скрипт там только для наглядности.

[AndreyB]

  On 8/12/2013 at 7:39 PM, wwt said:

SelenIT вам и показал с помощью CSS, а скрипт там только для наглядности.

Ясно, со скриптами еще не связывался, уж простите.

Получается смысл в том, что если нужно чтобы блок тянулся, то мы не указываем ему ширину за счет чего он заполняет свободное место.

А float в данном случае использовать нельзя потому что неизвестна ширина, соответственно он расширяется и за счет того, что не влезает в свободное пространство справа перемещается вниз, я правильно понимаю?

Т.е. все дело в ширине и float.

Спасибо еще раз.

[SelenIT]

Всё дело в overflow, благодаря которому div4 и его содержимое оказывается в отдельном контексте форматирования. Из-за чего он (по традиции, поддерживаемой всеми браузерами, хотя спецификация их к этому не обязывает!) ужимается в свободное от float-ов место, если можно, либо спускается вниз и занимает всю ширину родителя (как обычный блок, по умолчанию), если места не хватает.

Float так вести себя не умеет, потому что ужимается до ширины содержимого. Поэтому здесь не нужны ни float, ни явная ширина, всё верно. А вот вложенным дивам ширину задать вполне можно.