Display an image in span without converting it to a block level element

Question

I am a little confused over here. I have a txtbox and to the right of the txtbox, i want to insert a help icon. i have inserted that into a span. the problem is that i dont want to make this span a block because it goes down then. is there any other way to display this image without turning this into a block level element?

The Code goes here:

<input name="firm" type="text" id="firm" size="20" /><span id="helpico"></span>

The CSS:

#helpico{ background:url(images/question.png) left top; width:16px; height:16px;}

Answer 1

You can use this CSS:

#firm 
{
   float: left;
}
#helpico
{ 
   background:url(images/question.png) left top; 
   width:16px; 
   height:16px;
   display: block;
   float: left;
}

You have to use display block to enable widths and heights and to accept other styles. But to counter your issue of it "going down" you can set both the elements to float left and they will remain inline within the parent element.

Be aware that if the icon is relative to the content, it should be included with <img> tag and an alt attribute.

---

After seeing that you don't want to use floats OR display block, there is only one way left, use display: inline-block;.

Example for you here. :)