CSS irregular frame around variable-size content?

Question

Apologies for this sketch, but seems to convey my question best:

        +---------------+----------------+-----+
        |      div      |      v.div     |  d  |
        |               |                |  i  |
        +----+----------+----------------+  v  |
        | v  |                           |     |
        | .  |                           +-----+
        | d  |                           |  v  |
        | i  |            DIV            |  .  |
        | v  |         (content)         |  d  |
        |    |       variable size       |  i  |
        +----+                           |  v  |
        | d  |                           |     |
        | i  +------------------------+--+-----+
        | v  |          v.div         |   div  |
        +----+------------------------+--------+

I am trying to figure out the CSS for the 8 DIVs surrounding some variable sized content. Each of those DIVs has a background-image such that this will all look like a shape-cornered picture frame wrapping the center content. The outer and especially the corner DIVs also need to be transparent so some tricks I've used before for doing this don't work so well. Clearly the DIV's marked 'v.div' must expand to fill variable height and width; the corner DIVs are fixed-size.

With some image cutting and pasting, I could possibly restrict the problem to something like this, if the previous just can't be done:

        +---------------+--------------+-------+
        |      div      |      v.div   |  div  |
        |               |              |       |
        +----+----------+--------------+-+-----+
        | v  |                           |     |
        | .  |            DIV            |  v  |
        | d  |         (content)         |  .  |
        | i  |       variable size       |  d  |
        | v  |                           |  i  |
        |    |                           |  v  |
        +----+---+--------------------+--+-----+
        |   div  |         v.div      |  div   |
        +--------+--------------------+--------+

Anyone ever done anything like this willing to share their solution or an alternative approach?

Answer 1

Maybe this could help: http://www.neuroticweb.com/recursos/3-columns-layout/?

Or this: http://www.tanfa.co.uk/css/layouts/css-3-column-layout-v1.asp

Answer 2

Could this not be solved by using a background colour/background image, padding and border?

<style>

#variableSize {padding: 1em;
               border: 3px solid #000;
               background-color: rgba(215,215,215,0.5);
               background-image: url(path/to/img.png);
               background-repeat: repeat;
               background-position: 0 0;
               -moz-border-radius: 2em;
               -webkit-border-radius: 2em;
              }

</style>

<div id="variableSize">
   <p>Variable size content.</p>
</div>

It has compatibility issues, I confess, but the use of rgba() could be replaced with just a (partially-) transparent png to assure some cross-browser support?

i don't quite understand how this css accomodates variable size content. I figure at a minimum there are 4 fixed image divs (the corners) and 4 repeating images (2 in X, 2 in Y). the real question is how to arrange the floats, and how to get the repeating divs to fill available space – Scott Evernden

I think I misunderstood the question, sadly. While my above example does/should work it wouldn't provide the image-corners you're after.

If you use the above suggestion but contain images within the content to serve as the image corners then it might work:

<style>

#variableSize {padding: 1em;
               border: 3px solid #000;
               background-color: rgba(215,215,215,0.5);
               background-image: url(path/to/img.png);
               background-repeat: repeat;
               background-position: 0 0;
               -moz-border-radius: 2em;
               -webkit-border-radius: 2em;
               position: relative;
              }

#variableSize .topLeftImg
              {border: 0 none transparent;
               position: absolute;
               top: 0;
               left: 0;
               }

#variableSize .topRightImg
              {border: 0 none transparent;
               position: absolute;
               top: 0;
               right: 0;
               }

#variableSize .bottomLeftImg
              {border: 0 none transparent;
               position: absolute;
               bottom: 0;
               left: 0;
               }

#variableSize .bottomRightImg
              {border: 0 none transparent;
               position: absolute;
               bottom: 0;
               right: 0;
               }

</style>

<div id="variableSize">
   <img class="topLeftImg" src="path/to/image.png" />
   <img class="topRightImg" src="path/to/image.png" />
   <img class="bottomLeftImg" src="path/to/image.png" />
   <img class="bottomRightImg" src="path/to/image.png" />
   <p>Variable size content.</p>
</div>

The padding on the #variableSize would have to be equal to, or greater than, the width/height of the images. But should work? I'll try it tonight when I get home, if you don't try it first.

Okay, working demo up, over on: a site, somewhere. :)