Styling images with quicktags

I want to have the choice of whether an image is aligned left or right, and for it to have a border around it, with some padding with the text wrapping it. It’s worked in that the image is floated left in this instance, but it hasn’t added the border, or wrapped the text. What’s gone wrong here on my part?

Here’s the quicktag info:

edButtons[edButtons.length] =
new edButton('ed_imgleft'
,'imgleft'
,'<div class="img.left">'
,'</div>'
,'7'
);

edButtons[edButtons.length] =
new edButton('ed_imgright'
,'imgright'
,'<div class="img.right">'
,'</div>'
,'8'
);

The css:

img.left {
margin: 4px;
float: left;
padding: 1px;
border: 3px solid #fff;
}

img.right {
margin: 4px;
float: right;
padding: 1px;
border: 3px solid #fff;
}

The tag is wrapped around the img src bit as a div around it. I;m not sure how else to do it without making everything align one way only or the other.

I would be grateful for help on this.

Thanks in advance