This text should appear inside the div without crossing into the 'margins' dictated by the padding, to prevent going over, or under, the corner images.
This text should appear inside the div without crossing into the 'margins' dictated by the padding, to prevent going over, or under, the corner images.
This was cobbled together using four images embedded in the (x)html, positioned absolutely with negative margins. Obviously the overflow attribute of the #variableSize div was set to visible (in order to allow the images to show through), the 'frame' was created using a border, so repeating the image isn't necessary for the horizontals or verticals (unless you were hoping to use images for the 'bars' of the frame?). I realise this isn't exactly what you asked, since I've used positioned images to create the corners, rather than extraneous divs. But it seemed the cleaner solution.
#variableSize {width: 20em;
position: relative;
margin: 2em auto;
padding: 30px;
display: block;
overflow: visible;
border: 8px solid #f90;
}
.tl, .tr, .bl, .br
{position: absolute;
}
.tl, .tr {top: -20px;
}
.bl, .br {bottom: -20px;
}
.tl, .bl {left: -20px;
}
.tr, .br {right: -20px;
}
<div id="variableSize">
<!-- image block for corners -->
<img class="tl" src="img/corner.png" title="top left corner" />
<img class="tr" src="img/corner.png" title="top right corner" />
<img class="bl" src="img/corner.png" title="bottom left corner" />
<img class="br" src="img/corner.png" title="bottom right corner" />
<p>This text should appear inside the div without crossing into the 'margins' dictated by the padding, to prevent going over, or under, the corner images.</p>
</div>