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.
