How to make div expand with content?

[PHPstarter]

I have 3 divs on a line, surrounded by a another div(wrapper?) The middle section is content, while the div to the left and right work as borders (images). The middle section expands as should, but the left and right won't follow it.

    <div id="frame_wrapper">
          <div id="frame_left"></div>
          <div id="frame_middle">
 
                content bla bla
 
        </div>
          <div id="frame_right"></div>
    </div>
 

The CSS:

#frame_wrapper {
    top: -230px;
    width: 944px;
    position: relative;
    z-index: 75;
    border: 1px solid black;
    }
 
#frame_left, #frame_right, #frame_middle {
    background-repeat: repeat-y;
    width: 22px;
    margin: 0 auto;
    overflow: auto;
    }
 
#frame_right {
    background-image: url(skin/new/frame_r.png);
    float: right;
    }
 
#frame_left {
background-image: url(skin/new/frame_l.png);
float: left;
}
 
#frame_middle {
background-color: #eeeeee;
width: 900px;
    }

As you can see, there are no height attributes. I've taken them out atm, because no one worked.


The CSS for the document is:

html, body { height: 100%; }
 
/* if you remove this then the container disappears in IE */
* html #container {
height: 99%;

Thankful for replies

[Dormilich]

The middle section is content, while the div to the left and right work as borders (images).

why should they. the do not contain any content (right now), so the height should be 0.

not sure whether it is the best solution, but one that I got working is using nested <div>s and appropriate padding.

<div id="right">
    <div id="left">
        <div id="content">
<!-- your content -->
        </div>
    </div>
</div>

/* fill in your values */
#right {
    padding-right: 
    background-image:
    background-position:
    background-repeat:
}
#left {
    padding-left: 
    background-image:
    background-position:
    background-repeat:
}

[Death Slaught]

If I'm not mistaken it's impossible to have all three divisions expand equally, when one has more content than the others with HTML and CSS alone.


Regards, Death

[PHPstarter]

Thanks guys.
So if it's impossible, what do people do in this situation?
Merge the 3 into one, wide image that's being stretched, or the use of tables?

I tried Dormilich's method and I didn't quite make it work, though I'm still at it.

[JKing]

Javascript would be the solution. Get the height of the tallest column and apply it to the other columns.

I think I asked this in another thread but are you using a fixed width on your content column? You have declared a 900px width but is this just for your example or for your actual project?

[PHPstarter]

The width is for the actual project. :)

I have made a fix a the moment.. I've merged the 2 border images with the middle section so that it's an image being stretched (the images were made for stretchyness anyway).