Page crease for DIV boxes using CSS

This tutorial is will produce those page crease containers you usually see on most blogs/site. This tutorial allows you to do just that to any DIV elements located anywhere on your blog/site. It does so by using relative positioning to slightly offset a DIV to the bottom right while using it's background image (in this case, the creased image) as its border of the outer DIV. Let's get started, but first and foremost, always remember to back-up your current existent template in case it doesn't turn out as expected.



Click here to view a demo
(Although the demo is not showing the border, when implemented in Blogger, border will be visible.)

Download the entire zip file
(Zip files include entire codings along with images needed to implement this tutorial.)

CSS SECTION CODE
(Section code below should be placed in the CSS part of your template, located right before your closing head tag.)

<style type="text/css">
.curlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 300px;
}

.curlycontainer .innerdiv{
background: transparent url(media/brcorner.gif) bottom right no-repeat;
position: relative;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}
</style>

HTML SECTION CODE
(section code below should be placed in your desired location but in your HTML section code, you can also use "Add a Gadget" under Page Elements and move it to your desired location.)

<div class="curlycontainer">
<div class="innerdiv">
<b>Some title</b> <br />
Some text here.Some text here. Some text here.<br />
Some text here.Some text here. Some text here.<br />
Some text here.Some text here. Some text here.<br />
Some text here.Some text here.
</div>
</div>

NOTE: Remember that you can always modify the CSS part of the section code to your desired styles.

Questions or Comments? Just ask or leave a note, I'd be glad to help you out or take any advice.