I'm trying to create a navigation menu that horizontal and has an image spacer in between each link. The problem I'm having is that the second div I create pushes down the next text item and creates a new line. Here is my CSS:

Code:
 
<!--
.nav {
 font-family: Trebuchet MS, Verdana, Arial;
 font-size: 14px;
 font-weight: bold;
 background-color: #CCC;
 text-align: left;
 height: 22px;
 width: 725px;
 border: 1px solid #6699CC;
}

.navlinks {
 padding-right: 7px;
 padding-left: 7px;
}
-->
</style>
Here is my HTML:

Code:
<div class="nav"><div class="navlinks"></div><div class="navlinks">Photos</div><img src="images/divider.gif" alt=""></div>
Can anyone see what I'm doing wrong? Is there anyway to improve this? I'm kind of new at CSS .