Drawing a tape on a <div> using images and CSS

Question

I want to create a tape with div,: before and: after psuedo-elements and 3 pictures . Here is the site now , hosted on my home server. I got: before the image to work, but I can’t seem to get what happened: after the image is aligned on the right side. (please do not reference css tricks , they use pure CSS, I am for images!)

I think using relative placements may be a better alternative to swimming, but I don't quite understand them.

Also: does anyone know what causes the border around the bottom and sides of the navbar-inner?

EDIT: Updated CSS because I hate it when people publish temporary sites on SO:

div.hero-unit { background: url(../img/ribbon-center.png) repeat-x; border-radius: 0; margin: 0 -15px; padding: 30px; float: left; } div.hero-container:before { content: url(../img/ribbon-fold-left.png); float: left; margin-left: -30px + -48px + 15px; /* - Padding size (30px) - image width (48px) + margin (15px) */ } div.hero-container:after { content: url(../img/ribbon-fold-right.png); background: transparent; float: right; margin-right: -48px + -15px; /* - image-width (48px) - margin (15px) */ } 

HTML:

 <div class="hero-container"> <div class="hero-unit">content</div> </div> 

Answer 1

One option is to use the negative right margin on div.hero-container::after .. I played Firebug with it, and 15px seems right. I'm not sure why the image does not align to the right.

Aside: does anyone know what is causing the border around the bottom and sides of navbar-inner?

This is a shadow on .navbar-inner not a border