Div id hyperlink help - div widths?

[RJReelar]

okay, im really not sure what to do here, as I've done the same thing before and it's worked perfectly but now ive tried to do the same thing again for another website and it's just not working...

okay, heres the problem:

i have:

[html]<!--site related navigation-->
<div id="mainnav">
<div id="title">
.site&nbsp;
</div>
<a href="">Home</a><br />
<a href="">Staff</a><br />
<a href="">Affilia tes</a><br />
<a href="">Affilia tion</a><br />
<a href="">Link to Us</a><br />
<a href="">Site History</a><br />
<a href="">Past Layouts</a><br />
<a href="">About</a><br />
</div>[/html]

And in my CSS file i have:

#mainnav a
{
width: 100%;
background-color: #583D21;
text-align:right;
text-decoration:none;
color: #CCCC99;
}
#mainnav a:link
{
width: 100%;
text-align:right;
}
#mainnav a:hover
{
width: 100%;
background-color: #000000;
text-align:left;
color: #FFFFFF;
}
#mainnav a:visited
{
width: 100%;
background-color: #583D21;
text-align:right;
}

Now this is meant to control the links in the "mainnav" div, right? and to some extent it does, with the exception of width. All of the background properties are fine, except the background does not stretch to 100% of the div width and just stays as long as the word it is the background to.
Just so you know the "mainnav" div is 200px wide so the link background should be 200px wide.

sorry if thats a bit hard to understand, this is my first post and im not really sure how to explain it.
is there something im missing? can anybody help me?

[drhowarddrfine]

<a> is an 'inline' element, meaning it is just like text in a paragraph and cannot be resized. If you want to control the width, in your css, add 'display:block' which makes it, obviously, block level, just like the div.

[RJReelar]

<a> is an 'inline' element, meaning it is just like text in a paragraph and cannot be resized. If you want to control the width, in your css, add 'display:block' which makes it, obviously, block level, just like the div.

hmm, thanks that has helped, but what i don't understand is how i managed to do it before without having to do anything like that. o well, thanks for your help though.

Now i just need to figure out how to getthe links directly underneath eachother becuase now ive put the 'display:block' each link it spaced out as if you've put an extra "<br />" in the code.

[drhowarddrfine]

Remove the current <br>