anchor tag is causing a line break in my div 1

[gmail2]

OK, it's probably best if I post some code, so here goes:
HTML

<div class="nav"><span class="left">&nbsp;</span><a href="/" class="nav">Home</a><span class="right">&nbsp;</span></div>

CSS

div.nav	{
		background-color: #5fa0f9;
		text-align: center;
		float: left;
		width: 16.5%;
	}

a.nav	{
		
		color: #ffffff;
		font-weight: bold;
		text-decoration: none;
		font-size: 0.9em;
	}

.left	{
		background: url(images/left.gif) no-repeat top left;
		float: left;
		
	}

.right	{
		background: url(images/right.gif) no-repeat top right;
		float: right;
	}

Basically, the right span is going onto a new line. However, there's plenty of space in in the div for it without creating a new line. If I take away the <a href ... then it doesn't break onto a new line and creates the effect I want. But as soon a I put the anchor back in it messes it up again ... anybody got any ideas?

Irish Poetry - Karen O'Connor
Get your Irish Poetry Published

 

[Vragabond]

You're not understanding the idea of floated and non-floated elements. First you float left. That's not a problem. Next to that you put an unfloated anchor. After the anchor, you put float something to the right. Since anchor is unfloated, the next element will float under the unfloated element. If you switch up the order of your html, it will work:

<div class="nav"><span class="left">&nbsp;</span><span class="right">&nbsp;</span><a href="/" class="nav">Home</a></div>