lining up images using :before & :after

Question

I am trying to use the pseudo selectors :before & :after to surround a div with border images. However, I think I'm missing something. The :after image won't attach to the right of the element no matter what I try and the text has dropped below the image as shown on this JsFiddle example.

CSS

.panel {
    border:2px solid #634e32;
    border-radius:4px;
    margin-bottom: 30px;
    background-color: #ecd8b5;
}
.panel-header{
    margin: -5px -1px 10px 2px;
    padding-left: 15px;
    background:url('http://eaassets-a.akamaihd.net/lougame/cdn/409444/resource/webfrontend/ui/win_mainoverlay_t.png') repeat-x;
}
.panel-header:before,
.panel-header:after{
    content:"";
    width:9px;
    height:36px;
    overflow:hidden;
}
.panel-header:before {
    content: url('http://eaassets-a.akamaihd.net/lougame/cdn/409444/resource/webfrontend/ui/win_mainoverlay_tl.png');
    margin-left:-20px;
}
.panel-header:after {
    content: url('http://eaassets-a.akamaihd.net/lougame/cdn/409444/resource/webfrontend/ui/win_mainoverlay_tr.png');
}

HTML

<div class="panel">
    <div class="panel-header">Header Title Goes Here</div>
</div>

Answer 1

http://jsfiddle.net/53xxV/

.panel {
    border:2px solid #634e32;
    border-radius:4px;
    margin-bottom: 30px;
    background-color: #ecd8b5;
    position: relative;
    padding-top:40px
}
.panel-header{
    position:absolute;
    top:0;
    left:0;
    right:0;
    padding-left: 15px;
    background:url('http://eaassets-a.akamaihd.net/lougame/cdn/409444/resource/webfrontend/ui/win_mainoverlay_t.png') repeat-x;
    height : 29px;
    color: hotpink; /* :P */
    padding-top: 10px;
}
.panel-header:before,
.panel-header:after{
    content:"";
    width:9px;
    height:36px;
    overflow:hidden;
}
.panel-header:before {
    content: url('http://eaassets-a.akamaihd.net/lougame/cdn/409444/resource/webfrontend/ui/win_mainoverlay_tl.png');
    position:absolute;
    left:0;       
    top:0;
}
.panel-header:after {
    content: url('http://eaassets-a.akamaihd.net/lougame/cdn/409444/resource/webfrontend/ui/win_mainoverlay_tr.png');
    position:absolute;
    right:0;
    top:0;
}