CSS: Adjust height of a block to the size of text

Question

Hi,

I want to create a fancy frame around my text. I ended up with wrapping it in the following DIVs:

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

So it consists of the following blocks: the upper block (topDiv) that takes the whole width of a column. The text itself (textDiv). Left (leftDiv) and right (rightDiv) parts of the frame. And the bottom block (bottomDiv) that has the same dimensions as topDiv.

Here's what I mean:

<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>

The problem is that when I set the following parameter for textDiv:

height: auto;

, it acknowledges the size of text, but when I set the same parameter for leftDiv and rightDiv, it ignores it - because there is no text in it.

Is there a way to make height of leftDiv and rightDiv the same as height of textDiv?

Thanks.

Answer 1

Try more nesting:

<!-- (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>

It's cluttered, but it will cause all elements of your frame to grow with your ever-increasing text.

Answer 2

Using Jonathan's nesting, apply the following 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;
}

Exactly what do you want your frame to look like? If it's simple, the code could probably be reduced.

EDIT: Jonathan has updated his post to explain this