I'm trying to get my image to sit next to an

I floated the in which my image sits in (will apply some JavaScript to it later), but for the life of me I cannot get it to have a space of around 10 or 12px next to the H3 that it sits next to.

I can do it if I apply a margin-right of 130px or so, HOWEVER there are some H3 elements that will not be the same length everytime. I thought I could get the just have an auto width so it would stop whenever the text would stop (like my and elements seem to be doing.), but it seems to be taking up the whole line. So my problem will appear (as you can see) if I apply the margin-right:130px or more because there are subsequent elements that will be longer than "Complexity Factors".

I wonder if I should sit my elements in that section inside of a div perhaps and set dimensions on that div? In any case, here is my CSS (which with positioning, I am kind of shaky with, admittedly)

here is the page in question:

http://scope-stage.scholastic.com/is...ive-nonfiction

here is my code:

/******EXPAND AND COLLAPSE BUTTONS******/

.expandingBtn img {
float:right;
background-image'expandBtn.png');
margin-right:115px;
margin-top:-13px;
clear:both;
}

and my markup:
<h3 class="colorScheme">
Complexity Factors</h3>
<div class="expandingBtn">
<img src="/resource/uploads_scope/img/expandBtn.png" /></div>