Резиновый div, ширина которого зависит от ширины контента в нем расположенного

[Качан Капусты]

Помогите, пожалуйста, сверстать такой макет:

Условия такие:

1. Синий слой находится по центру экрана.

2. В оранжевом диве находится контент, ширина которого заранее неизвестна. Ширина оранжевого дива равна ширине контента в нем расположенного. Ширина синего и зеленого дива равна ширине оранжевого дива.

3. Оранжевый и зеленый дивы прибиты к левому краю синего дива.

На таблицах это сверстать очень просто, код будет выглядеть примерно так:

<center>
 <table>
  <tr><td height="200px">Это зеленый блок</td></tr>
  <tr><td height="100px">Это оранжевый блок, его ширина и ширина всей таблицы будет зависеть от ширины контента, расположенного в этом блоке</td></tr>
 </table>
</center>

А как нужный кроссбраузерный результат получить с помощью верстки на дивах?

[Bondarov]

код HTML

<div id="content">

<div id="header"><p>Text</p></div>

<div id="main"><p>Text</p></div>

</div>

код css

body {

margin: 0;

padding: 0;

}

#content {

margin: 0 5%;

border: 1px solid blue;

padding: 5px;

}

#header {

border: 1px solid green;

margin-bottom: 2px;

}

#header p {

text-align: justify;

padding: 5px;

font-size: 90%;

margin: 0;

}

#main {

border: 1px solid orange;

margin-bottom: 2px;

}

#main p {

text-align: justify;

padding: 5px;

font-size: 90%;

margin: 0;

}

Писал наскоряк, проверишь...

Edited January 24, 2009 by Bondarov