Box repetible debajo del contenido

[Rafael]

Aunque específicamente el problema es que si no tienes contenido se colapsan.

Podrías jugar con varias cosas.
1) No utilizar 3 divs separdos, sino quiza los top y bottom como imágenes dentro del mismo div.
2) Quizá usar multiple backgrounds, alineados arriba y abajo respectivamente.

- Sus contras serán que robablemente no podrían ser transparentes.

Para que no colapse tan fácil creo que se puede usar overflow: hidden, y también podrías usar un min-height: 100px; digamos.

Lo que entiendo de tu código es que básicamente tienes que anidar los divs.

Código HTML:

<div>
<div>
 <div class="back-content_top"></div>
 <div class="back-content_mid">
 
<div>
 <div class="top-content"></div>
 <div class="mid-content"></div>
 <div class="foot-content"></div>
</div>
 
</div>
 <div class="back-content_foot"></div>
</div>
 

Podrias usar las imágenes directo:

Código HTML:

<div>
<div>
 <img src="back-content_top.png">
 
 <div class="mid-content">
Texto y hacer lo mismo aquí dentro
</div>
 
<img src="back-content_foot.png">
</div>
 

Pero realmente creo que lo puedes simplificar así:

Código HTML:

<div class="back-content">
 
<div class="content">
Texto
 </div>
 
</div>
 

Y juegas con los multiple backgrounds. Estudia esto:
http://www.css3.info/preview/multiple-backgrounds/

Aunque también, viendo tu dibujo, podrás integrar los dos diseños (back y mid) en un solo estilo de imagen.