I have an image I am trying to display over the top of a bottom border, but it is being arranged behind the bottom border element (in this example, named "divider"), and I can't get it to align correctly.

I would like the image to be displayed in the middle of the the border element and over the top of it. Vertically, I am trying to get the 1px line on the left and right side of the image to align with the 1px border to appear as if it is one element.

Here is the code:

.divider {
border-bottom: 1px solid #c3c3c3;
clear: both;
display: block;
margin-bottom: 20px;
padding-top: 20px;
width: 100%;
}

.sidearrow {
background: url(http://s16.postimage.org/sbf7v9n75/sidearrow.png) 50% 14px no-repeat;
width: 100%;
height: 25px;
}?    

<p>Here is some content above</p>

<div class="sidearrow"></div>
<div class="divider"></div>

<p>Here is some content below</p>?

And the jsfiddle: http://jsfiddle.net/F5xjx/2/

Any ideas how to get this to work? Thanks in advance.