Image Displaying Next To The List

I have some code that has the property display-inline. Due to this it displays the list horizontally. Now, I placed an image in my code and it appeared after the list. I wanted the

Solution 1:

Remove the float from a. Also: what the heck is border-left:15px solid #fff;, didn't you mean left margin?

Solution 2:

try this:

<div>
<ul id="list-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Book</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div><!--navigation div ends-->
<!--<div>-->
<div style="clear:both"></div>
<img src="Book_Cover-465x540.png" />