One popular design feature of many sites these days continues to be a section of framed content in a box. Some examples include the boxes that you can see on sites like CNN, or twitter just to name a few.

A framed content box that is shown on twitter

CNN's take on the framed box

This is a perfect example of how to use nested div tags to create such an effect that has the ability to scale in width so there is no need to change the top image every time you decide to change the width of the page. If you are new to html and css you probably read the title of the article and wondered to yourself what sprite has to do with any of this, right? Sprites are a series of images that have all been combined in one image, make sense? See when you design a user interface for a website some elements are bound to be repeated over and over again, and you may want to cut doen on the round trips to the server that are made when a resource like an image is requested by the browser, the answer is creating a sprite, or a collage of all the images that will be used by the interface in ‘background-image’ css declarations. Just like the screen the coordinates 0,0 are given to the top left hand pixel of an image, therefore you can pick just the slice of a large image that you want to show in the background of a div tag. A good example would be the left hand corner below, see you start at 0 pixels from the left and 0 pixels from the top (‘background: url(‘../../testsomethings/images/bg_sprite.gif’) 0px 0px;’ ) which happens to be right where the left hand curve is at, then you go 9 pixels wide and done. For the right we use the same image but we start from the far right and go 9 pixels back toward the left ( background: url(‘../../testsomethings/images/bg_sprite.gif’) -352px 0px; ). Now for the center piece we have to go down 100 pixels from the top or else we will see the curve appear in the center box, so we use ( background: url(‘../../testsomethings/images/bg_sprite.gif’) 0px -100px ; )

You can see that the classes involved in box include:

• roundedbox – this is the container that holds the entire box
• header – this is the top of the box and it contains the left corner, right corner, and center sections of the round box.
• leftCorner – this holds the left hand corner so that the background image will give the box the effect of being rounded.
• rightCorner – this holds the right hand rounded image in the background
• center - this is the repeating center image and also contains the heading which has been placed in a h2 tag with the font properties adjusted for readability.
• content – this div holds the actual story content and contains the gradient grey background slice which fades into white.

You can see the code below here ( http://www.learnsomethings.com/testsomethings/rounded_corners.html ).

You can see the sprite here, but you could probably do a much better job matching the boxes yourself ( http://www.learnsomethings.com/testsomethings/images/bg_sprite.gif ).

The CSS

<style>
.roundedbox .header {
                position: relative;
                height: 33px;
                width: 100%;
                z-index: 200;
}

.roundedbox .header h2 {
                font-size: 16px;
                color:#FFF;
                font-weight:200;
                margin-left: 3px;
                margin-top: 3px;  
                display: inline;
                float: left;  
                font-family:Verdana,sans;
}

.roundedbox .leftCorner {
                background: url('../../testsomethings/images/bg_sprite.gif') 0px 0px;
                height: 33px;
                width: 9px;
                position: absolute;
                left: 0;
                top: 0;
}

.roundedbox .center {
                background: url('../../testsomethings/images/bg_sprite.gif') 0px -100px ;
                height: 33px;
                position: absolute;
                left: 9px;
                right: 9px;
}

.roundedbox .rightCorner {
                background: url('../../testsomethings/images/bg_sprite.gif') -352px 0px;
                height: 33px;
                width: 9px;
                position: absolute;
                right: 0;
                top: 0;
}

.roundedbox {
                position:relative;
                display:block;
                float:right;
                margin:8 8 8 8;
                padding: 0;
                width:100%;
}
.content {
                position:relative;
                display:block;
                background: #fff url('../../testsomethings/images/widgetBG.gif') bottom repeat-x;
                padding:6px 10px 6px 10px;
                font-family:Verdana,sans;
                font-size:12px;
                line-height:1.4em;
                list-style-type: disc;
}
</style>

The html that is required to make one of the boxes to the left consists of several div tags to comprise the various parts of the container.

The HTML code

<div class="roundedbox" >
                <div class="header">
                  <div class="leftCorner"><!-- I'm just here to make
                        the left corner rounded--></div>
                  <div class="center">
                        <h2 title="" role="complementary">Headline News</h2>
                  </div>
                  <div class="rightCorner"><!-- I'm just here to make
                        the right corner rounded--></div>
                </div>
       <div class="content" >
             <p>Some great content would normally go here, and
               maybe even a thumbnail image!<b>Read More ... </b>
             </p><br />
       </div>
</div>