This is for your content.
This is for your content.
This is for your content.
This is for your content.
This is for your content.
This is for your content.
This is for your content.
This is for your content.
This is for your content.
This is for your content.
This is for your content.
This is for your content.
<style type="text/css">
/* set the image to use and establish the lower-right position */
.cssbox1, .cssbox1_body, .cssbox1_head, .cssbox1_head h2 { /* シンプルな背景画像 */
background:transparent url("/content/img/topic/roundcornerbox/Spiffy/Spiffy1.png") no-repeat bottom right;
}
.cssbox2, .cssbox2_body, .cssbox2_head, .cssbox2_head h2 { /* 影付き背景画像 */
background:transparent url("/content/img/topic/roundcornerbox/Spiffy/Spiffy2.png") no-repeat bottom right;
}
.cssbox1, .cssbox2 {
/* intended total box width - padding-right(next) */
width:235px !important; /* IE Win = width - padding */
width: 220px; /* the gap on the right edge of the image (not content padding) */
padding-right:15px; /* use to position the box */
margin:20px auto;
}
/* set the top-right image */
.cssbox1_head, .cssbox2_head {
background-position:top right; /* pull the right image over on top of border */
margin-right:-15px; /* right-image-gap + right-inside padding */
padding-right:40px;
}
/* set the top-left image */
.cssbox1_head h2, .cssbox2_head h2 {
background-position:top left; /* reset main site styles*/
border:0; /* ditto */
/* padding-left = image gap + interior padding ... no padding-right */
margin:0; padding:20px 0 5px 40px; height:auto !important; height:1%; /* IE Holly Hack */
}
/* set the lower-left corner image */
.cssbox1_body, .cssbox2_body {
background-position:bottom left; margin-right:25px; /* interior-padding right */
padding:5px 0 15px 40px; /* mirror .cssbox1_head right/left */
}
</style>
<!-- cssbox1 -->
<div class="cssbox1">
<div class="cssbox1_head"><h2>This is a header</h2></div>
<div class="cssbox1_body">
<p>
This is for your content.<br>
This is for your content.<br>
This is for your content.<br>
This is for your content.<br>
This is for your content.<br>
This is for your content.<br>
</p>
</div>
</div>
<!-- cssbox2 -->
<div class="cssbox2">
<div class="cssbox2_head"><h2>This is a header</h2></div>
<div class="cssbox2_body">
<p>
This is for your content.<br>
This is for your content.<br>
This is for your content.<br>
This is for your content.<br>
This is for your content.<br>
This is for your content.<br>
</p>
</div>
</div>