The previous examples will all expand vertically if you increase your font size. However,
they do not expand horizontally as the width of the box has to be the same as the width
of the top and bottom images. If you want to create a flexible box, you will need to take a
slightly different approach. Instead of the top and bottom curves consisting of a single
image, they need to be made up of two overlapping images
As such, the bottom images need to be as tall as the maximum height of the box.
We will name these images top-left.gif, top-right.gif, bottom-left.gif, and
bottom-right.gif.
More images are
required for this method to work, so you will have to add a couple of extra, nonsemantic
elements to your markup.
<div class="box">
<div class="box-outer">
<div class="box-inner">
<h2>Headline</h2>
<p>Content</p>
</div>
</div>
</div>
.box {
width: 20em;
background: #effce7 url(images/bottom-left.gif)
no-repeat left bottom;
}.box-outer {
background: url(images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 5%;
}
.box-inner {
background: url(images/top-left.gif) no-repeat left top;
}
.box h2 {
background: url(images/top-right.gif) no-repeat right top;
padding-top: 5%;
}
.box h2, .box p {
padding-left: 5%;
padding-right: 5%;
}
The addition of a couple of extra nonsemantic elements is not ideal. If you only
have a couple of boxes it is probably something you can live with. But if you are
concerned you could always add the extra elements using JavaScript (and the
DOM) instead.
