CSS - including right and left shadow images in a style

Hi:

I have a fixed-width web page that has a shadow on the left of the page and a shadow on the right of the page.  I currently handle this in the markup with 3 divs:

<div class="leftShadowHeader" />
<div class="headerBox" />
<div class="rightShadowHeader" />

I would like to create one class called headerBoxCombined that includes the left and right shadows.  The CSS for the divs above is as follows:

.headerBox
{
    width: 785px;
    height: 76px; /**/
    padding: 0px;
    background-image: url('hdco_Header_wide_base.png');
    background-repeat: no-repeat;
}

.leftShadowHeader
{
    /*border: thin solid #FF0000;*/
    background-image: url('base_left.gif');
    float: left;
    width: 22px;
    background-repeat: repeat-y;
    height: 76px;
}

.rightShadowHeader
{
    /*border: thin solid #FF0000;*/
    background-image: url('base_left.gif');
    float: right;
    width: 22px;
    background-repeat: repeat-y;
    height: 76px;
}

Any help in creating the new style would be greatly appreciate.

rbs

<div class="leftShadowHeader" />
<div class="headerBox" />
<div class="rightShadowHeader" />

.headerBox
{
    width: 785px;
    height: 76px; /**/
    padding: 0px;
    background-image: url('hdco_Header_wide_base.png');
    background-repeat: no-repeat;
}

.leftShadowHeader
{
    /*border: thin solid #FF0000;*/
    background-image: url('base_left.gif');
    float: left;
    width: 22px;
    background-repeat: repeat-y;
    height: 76px;
}

.rightShadowHeader
{
    /*border: thin solid #FF0000;*/
    background-image: url('base_left.gif');
    float: right;
    width: 22px;
    background-repeat: repeat-y;
    height: 76px;
}

Select allOpen in new window