Question

I am new to HTML programming.
Please refer to the code below:

<div data-role="content" data-mini="true" >
  <div class="content-primary">
    <input type="image" src="images/mobile.png" style="width:100px; padding:5px; background:#fff; border:1px solid #999;" value="Input" type="image" onclick="mobileClicked()" data-role="none" />
    <span style="clear:both">Mobile</span>
  </div>
</div>

All i want is to get the text below the image.

Answer 1

There are lots of ways that you can achieve this; If you are not married to using a span tag, one possibility is to change it to a p tag (jsFiddle here: http://jsfiddle.net/tuanderful/WcU2M/ ) This allows you to even remove the clear: both

<div data-role="content" data-mini="true" >
    <div class="content-primary">
    <input type="image" src="images/mobile.png" style="width:100px; padding:5px; background:#fff; border:1px solid #999;" value="Input type=image" onclick="mobileClicked()" data-role="none" />
    <p style="">Mobile</p> 
    </div>
</div>

If you stick with your current structure, I notice you have a clear: both on the caption… I’ll add float: left to both the caption as well as the input.

<div data-role="content" data-mini="true" >
<div class="content-primary">
<input type="image" src="images/mobile.png" style="width:100px; padding:5px; background:#fff; border:1px solid #999;float: left" value="Input type=image" onclick="mobileClicked()" data-role="none" />
<span style="float: left; clear:both">Mobile</span> 
</div>
</div>