IMHO.WS - Помогите сконструировать при помощи div

IMHO.WS (https://www.imho.ws/index.php)

- Веб-программирование (https://www.imho.ws/forumdisplay.php?f=29)

- - Помогите сконструировать при помощи div (https://www.imho.ws/showthread.php?t=104276)

Помогите сконструировать при помощи div

Код:

<body style="margin: 0;">

<div style="background: red; width: 700px; height: 300px; top: 50px; left: 150px; position: relative;"></div>

<div style="background: blue; width: 700px; height: 500px; left: 150px; position: relative;"></div>

<div style="background: yellow; width: 450px; height: 600px; left: 400px; top: 200px; position: absolute;"></div>

<div style="background: green; width: 700px; height: 60px; left: 150px; position: relative;"></div>

</body>

Посмотрите результат, вот такой должна быть структура предполагаемого сайта. Но проблема в том, что желтый блок нужен для текста, а если его много, то этот блок не будет подстраиваться под высоту данную текстом. Вопрос, как бы сделать, чтобы желтый блог находился на этой исходной позиции, но мог изменяться в высоту, а синий блок растягивался, подстраиваясь под конец жолтого, зеленый же передвигался вниз под синим.

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

Цитата:

Сообщение от Naked

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

не получается, мне кажется надо что-то с position придумывать :(

Цитата:

Форум:
не получается, мне кажется надо что-то с position придумывать

можешь привести пример кода, когда все это рушится?

Код:

<body style="margin: 0;">

<div style="background: red; width: 700px; height: 300px; top: 50px; left: 150px; position: relative;"></div>

<div style="background: blue; width: 700px; height: 500px; left: 150px; position: relative;"></div>

<div style="background: yellow; width: 450px; height: 600px; left: 400px; top: 200px; position: absolute;"><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div>

<div style="background: green; width: 700px; height: 60px; left: 150px; position: relative;"></div>

</body>

Вотрезультат налицо :(

Код:

<body style="margin: 0;">

<div style="background: red; width: 700px; height: 300px; top: 50px; left: 150px; position: relative;"></div>

<div style="background: blue; width: 700px; left: 150px; position: relative;">

<div style="background: yellow; width: 450px;  left: 250px; margin: -50px 0 0 0; position: relative;"><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div>

</div>

<div style="background: green; width: 700px; height: 60px; left: 150px; position: relative;"></div>

</div>

Вот то, что я хотел изначально. Все гениальное просто, удалите эту тему к чертям собачим, позориться не хочется. :biggrin: