Html img after label element

Hi,

I have the following HTML :

<div class="controlTitleContainer ">
    <label for="test">Titel</label>
    <div class="q">&nbsp;</div>
</div>

The CSS looks like this

.controlTitleContainer .label
{
    font-size:              0.94em;
    color:  开发者_开发百科                #778899;
    display:inline;
}

.controlTitleContainer .q
{
    background-image:       url("Images/Common/Icons/questionMark_15x14.png");
    height:                 14px;
    width:                  15px;
    float:left;
}

The problem is that the div will be placed to the left of the label instead of to the right? Why?

I have tried to switch the div to a span with no success. Also If I change the div to a img intead then it will work but there is some unvanted margins that I can´t remove with the div element.

Pleas advice

Edit1: The confusions in the question should now be fixed, sorry for that.

MySolution : I created two div elements (one for text and one for icon) and then set float to left on both.

You're quite confused. You talk about IMG in question title, then you present SPAN in your code and afterwards talk about DIV in your text.

But I guess all three refer to SPAN in your code since you do set a background image to your SPAN element.

Solution

Anyway. Your span is floated left according to your CSS. If you remove the following line in your style sheet, your span will appear to the right of your label:

float: left; /* <- remove this */

Edit: I suppose your question got downvoted due to this confusion. If you want the community to help with detailed answers the least you could do is to take the time to formulate your question with the same amount of care as you expect back.

Do you not want the image to the right of the label? You have specified float: left;. You may also want to change .label to label in line one of the css code.

You could use the "CSS :after Selector"

Link : http://www.w3schools.com/cssref/sel_after.asp

Floats can be tricky... I would just make sure that the label is inline or inline-block, and that your image or image container also is inline or inline-block. They would then be aligned as text on a row. Yeay!