CSS: отрегулируйте высоту блока до размера текста

Question

Я хочу создать модный кадр вокруг моего текста. Я закончил с окружив его в следующих DIVs:

____________________ 
|__________________| 
| | Here will | | 
| | be some | | 
| |  text  | | 
| |  ...  | | 
|_|______________|_| 
|__________________| 

Так он состоит из следующих блоков: верхний блок (topDiv), который занимает всю ширину столбца. Сам текст (textDiv). Left (leftDiv) и правая (правая) часть кадра. И нижний блок (bottomDiv), который имеет те же размеры, что и topDiv.

Вот что я имею в виду:

<div class="topDiv"> 
</div> 

<div class="mainDiv"> 
    <div class="leftDiv"> 
    </div> 

    <div class="textDiv"> 
     <? echo $myrow['maintext']; ?> 
    </div> 

    <div class="rightDiv"> 

    </div> 
</div> 

<div class="bottomDiv"> 
</div> 

Проблема заключается в том, что, когда я установил следующий параметр для textDiv:

height: auto; 

, он признает размер текста, но когда я установил тот же параметр для leftDiv и rightDiv, он игнорирует его - потому что в нем нет текста.

Есть ли способ сделать высоту leftDiv и rightDiv такой же, как высота textDiv?

Спасибо.

Answer 1

Попробуйте больше вложенности:

<!-- (top of frame) has background on top --> 
<div class="top"> 
    <!-- (bottom of frame) has background on bottom --> 
    <div class="bottom"> 
    <!-- (left of frame) has background on left, margin on top/bottom --> 
    <div class="left"> 
     <!-- (right of frame) has background on right --> 
     <div class="right"> 
     <!-- (content area) margin on left and right --> 
     <div class="content"> 
      Hello World 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Это суматоха, но это вызовет все элементы вашего кадра, чтобы расти вместе с постоянно увеличивающимся текстом.

Answer 2

Использование вложенности Джонатана, примените следующий CSS:

.top 
{ 
    padding-top: 10px; /*height of top image*/ 
    background: url(top.png) top repeat-x; 
} 

.bottom 
{ 
    padding-bottom: 10px; /*height of bottom image*/ 
    background: url(bottom.png) bottom repeat-x; 
} 

.left 
{ 
    padding-left: 10px; /*width of left image*/ 
    background: url(left.png) left repeat-y; 
} 

.right 
{ 
    padding-right: 10px; /*width of right image*/ 
    background: url(right.png) right repeat-y; 
} 

.content 
{ 
    width: 400px; 
    height: 400px; 
} 

Именно то, что вы хотите, чтобы ваш кадр выглядеть? Если это просто, возможно, код может быть уменьшен.

EDIT: Джонатан обновил свое сообщение, чтобы объяснить это