Image appearing in the wrong place

I have a list that I want to precede on each line with a small image.

The CSS:

.left div.arrow{background-image: url(../images/design/box.png); float:left; height:15px; width:15px; margin-right:2px;}

.left a.list:link, a:visited, a:active {color:black; font-size:0.8em; text-decoration:none; display:block; float:left;}

The HTML:

<div class="panel">My quick links</div>
<div class="arrow"></div>
<a href="/messages.php?p=new" class="list">Send a new message</a>
<br />
<div class="arrow"></div>
<a href="/settings.php#password" class="list">Change my password</a>
<br />
<div class="arrow"></div>
<a href="/settings.php#picture" class="list">Upload a new site image</a>
<br />

As you can see, each image should go before the writing. On the first line, the text "Send a new message" has the preceeding image. Howe开发者_StackOverflow社区ver, each line afterwards has the image at the end. So "Send a new message" has an image at the start and finish.

It is like the images are staying at the end of the previous line. Any ideas?

Your <br /> does not clear the float it only advances download a specific number of pixels listed in your CSS - I would guess 8 pixels down and that does not clear the 15 pixel floating background-image in the divide on the left.

You need something like <br style="clear:left"/> or <br style="clear:both"/> the style="clear:left" will advance below the last floating element.

For semantics you could style a LI to be a block and have a background image. If ../images/design/box.png is greater than 15 pixel make sure you use the overflow style.

Update

.left div.arrow{clear:left; background-image: url(../images/design/box.png); float:left; height:15px; width:15px; margin-right:2px;}

would be the none semantics solutions

You can do less work and integrate the arrow into the link itself:

a.arrow {
    background-image: url(../images/design/box.png);
    float:left;
    min-height:15px;
    margin-right:2px;
    display:block;
    background-repeat:no-repeat;
    background-position:0px 0px;
    padding-right:20px
    }

If you want the scoop on nice-looking links and menus see: I love lists.