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.
