How to align a background image for a DIV

Hi. I'm having a few problems aligning a background image within a div. The code is supposed to create a centered box with a small 16x16 PDF logo to the left followed by 'PDF Download:' and then the link.

CSS:

/* Download Box */

#page .download {
	width:350px; 
	border:1px solid #CCCCCC; 
	background:#F6F6F6; 
	margin:0 auto 0 auto; 
	text-align:center; 
	padding:5px 0 5px 0;
	margin-bottom: 15px;
}

#page .download .pdf {
	padding:0 0 0 0; 
	background:url(images/pdf.gif) no-repeat;
}

Code (markup):

<div class="download">
<span class="pdf">PDF Download : <a href="../files/Sample-Home-Information-Pack.pdf">sample-home-information-pack.pdf</a></span>
</div>

HTML:

The problem is that the image is displayed behind the 'PDF' text. Can somebody please explain how to align this so the image is to the left?

 

Solved it myself using another div instead of span.

 

yes, is better to use separate divs in your xhtml css

 

Why do you have a Span and a DIV inside each other when they only contain the anchor, you can get away with just using one or the other?
You are allowed to set the background image and a background colour to one thing if this was the reason you did it.

Remember a SPAN is an in-line element, whereas a DIV is a block element. So dimensions won't work for the SPAN unless you specify:

display:block;

for the span. So be sure to use this and span away!