Question

I have an image which shows a plus sign and next to the image it displays a little message. Code is below:

<table id="plus" align="center">
<tr>
<th>
<input type="image" src="Images/plussign.jpg" name="plussign" width="30" height="30" id="plusimage"><span id="plussignmsg">(Click Plus Sign to look <br/> up Previous Questions)</span>
</th>
</tr>
</table>

The issue I have is that the message is not really displayed inline next to the image. The image is 30 pixels high but the message is displayed about from bottom 10 pixels high. How can I get the message next to the image to display inline with the image properly.

Below is css:

#plusimage{
    clear:right;    
}        

#plussignmsg{
    font-size:10px; 
    display:inline;
}  

Answer 1

Try this:

#plusimage{
    float:left;   
}        

#plussignmsg{
    font-size:10px; 
    display: block; float:left;
}  

Lately I found display the container as table,and contents as table-cell also works.