Question

http://jsfiddle.net/Zx836/

In the second box, notice how the arrow is in the same place. How can I make it flow with the div?

Using scroll right center in the background property works but I want to keep some padding right.

I’m also trying to avoid using 2 divs or the tag. Is this possible just via the .box div?

Answer 1

How about adding the image using :after instead?

.box {
    background: #a6cf83;
    float:left;
    color:#333;
    font-weight:bold;
    padding:8px;
}

.box:after {
    content: url(http://cdn1.iconfinder.com/data/icons/humano2/24x24/actions/new-go-next.png);
}