Magic Growing Boxes

Making expandable boxes, with curved edges and shadows or glows can be tricky. Here is a way to do it using class styles.

First we need 3 images: a top box, a middle repeating section, and a bottom. You can use these:

First insert a div. Give it a name so we can control it. I've called mine 'box1'

Using CSS, set the width of the box to be 250px

#box1 {
width:250px;
}

Next, add a class attribute called background to the 'box1' div.

We use the background class to add a background image in the CSS. In this case we are using a thin horizontal slice which we will centre and repeat on the y axis. This means that when the box expands (either due to adding more text, or because the user has resized the text) the box will just get bigger.

.background {
background: url(images/glowingbox_middle.png) repeat-y center center;
}

Next we need to add the top of the box. To do this we need another div tag to add the class to. Insert this inside the box1 div and add a class called 'boxtop'

In the CSS style the boxtop class to add the image of the top of the box. This will not repeat as we only want it to display once, at the top and centre of the div. Set the width to 100% otherwise, the background image may repeat outside the box.

.boxtop {
background: url(images/glowingbox_top.png) no-repeat top center;
width:100%;
}

Add some content to the inner div. I have added a header and 3 paragraphs.

<body>
<div id="box1" class="background">
<div class="boxtop">
<h2>Header text</h2>
<p>Normal text here. Normal text here. Normal text here. Normal text here</p>
<p>More normal text here. More normal text here. More normal text here. More normal text here</p>
<p>Last paragraph text here. Last paragraph text here. Last paragraph text here</p>
</div>
</div>
</body>

The last thing we need to complete the box is to add the bottom part. To do this we put a class on the bottom paragraph which will reference the bottom image. I have called mine 'boxbottom'.

<p class="boxbottom">Last paragraph text here. Last paragraph text here. Last paragraph text here</p>

In the CSS add the background image.

.boxbottom {
background: url(images/glowingbox_bottom.png) no-repeat bottom center;
}

The box should now look like this, so next we need to style the paragraph and header content and position it within the box.

Style the header by adding a font face, colour, size and alignment.

h2{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
font-size: 110%;
text-align:center;
}

Next, style the paragraph text the same way.

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
font-size: 80%;
line-height: 150%;
}

The text is now looking much better but we finally have to position it correctly.

Add some padding to the left and right margins of the paragraph, keeping the top and bottom at 0ems;

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
font-size: 80%;
line-height: 150%;
padding-left: 3em;
padding-right: 3em;
padding-top: 0em;
padding-bottom: 0em;
}

To make the image sit below the paragraph text, we need to add some bottom padding to the boxbottomstyle, so that the image will sit a little lower relative to the text.

.boxbottom {
background: url(images/glowingbox_bottom.png) no-repeat bottom center;
padding-bottom:2em;
}

Finally, we position the header a little lower by adding some padding to the top of the box top class, so that the image will sit a little higher relative to the text.

.boxtop {
background: url(images/glowingbox_top.png) no-repeat top center;
width:100%;
padding-top:1.5em;
}

We now have a pretty box containing all the text.

We can add additional text to the box and it will still look fine, because the box will grow with the content