aligning the image on the right side of text box - html

Question

I have the below form,
I want the green image on the right side of text box instead of getting below the text box.
The image is visible if the field is validated.
My css
<style type="text/css">
.formcontainer{
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 0 4px #ccc;
-webkit-box-shadow: 0 0 4px #ccc;
-moz-box-shadow: 0 0 4px #ccc;
border:1px solid #ccc;
padding:15px;
width: 300px;
margin:0 auto;
}
form {
margin:0 auto;
text-align:left;
width:100%;
background:#fff;
behavior: url(./border-radius.htc);
font-family:Calibri;
height: auto;
}
fieldset.border{
overflow:hidden;
border:1;
-moz-border-radius:5px;
border-radius: 5px;
-webkit-border-radius: 5px;
margin:3px 0;
padding:10px;
border:solid 1px #C0C0C0;
}
fieldset.no_border{
overflow:hidden;
border:0;
padding:0 0 10px 0;
margin:0;
}
fieldset.no_border_submit{
overflow:hidden;
border:0;
text-align:center;
margin:3px 0;
}
input.effect {
border:1px solid #ccc;
height: 20px;
padding:3px;
width:70%;
font-size:14px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.cssSubmitButton {
font-size: 12px;
background: #fff no-repeat 4px 5px;
display: inline-block;
padding: 5px 20px 6px;
color: #333;
border:1px solid #ccc;
text-decoration: none;
font-weight: bold;
line-height: 1.9em;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
position: relative;
cursor: pointer;
outline:none;
}
.cssSubmitButton:visited {}
.cssSubmitButton:hover {
border:1px solid #333;
}
#subscribeForm span{
margin-left: 0px;
color: #b1b1b1;
font-size: 11px;
font-style: italic;
display:none;
}
fieldset.border{
overflow:hidden;
border:1;
-moz-border-radius:5px;
border-radius: 5px;
-webkit-border-radius: 5px;
margin:3px 0;
padding:10px;
border:solid 1px #C0C0C0;
}
fieldset.no_border{
overflow:hidden;
border:0;
padding:0 0 10px 0;
margin:0;
}
fieldset.no_border_submit{
overflow:hidden;
border:0;
text-align:center;
margin:3px 0;
}
#subscribeForm input.error{
background: #f8dbdb;
border-color: #e77776;
}
#subscribeForm span.error{
color: #e46c6e;
display:block;
}
#success{
display:none;
}
#button{
text-align:center;
}
</style>
my html
<div class="formcontainer">
<form method="post" action="" id="subscribeForm" name="subscribeForm">
<fieldset class="no_border">
<label>Login ID: </label><br /><input type="text" class="effect" name="login_id" id="login_id" autocomplete="off" ><img id="login_id_correct" style="display:none" src="./images/tick.png" />
<span id="login_idInfo">Valid E-mail please, you will need it to log in!</span>
</fieldset>
<fieldset class="no_border">
<label>Name: </label><br /><input type="text" class="effect" name="name" id="name" autocomplete="off" >
<span id="nameInfo">What's your name?</span>
</fieldset>
<fieldset class="no_border">
<label>Contact No: </label><br /><input type="text" class="effect" name="contact_no" id="contact_no" autocomplete="off" >
<span id="contact_noInfo">Valid E-mail please, you will need it to log in!</span>
</fieldset>
<fieldset class="no_border">
<label>Email: </label><br /><input type="text" class="effect" name="email" id="email" autocomplete="off" >
<span id="emailInfo">Valid E-mail please, you will need it to log in!</span>
</fieldset>
<fieldset class="no_border">
<label>Password: </label><br /><input type="password" class="effect" name="password1" id="password1" autocomplete="off" >
<span id="password1Info">Valid E-mail please, you will need it to log in!</span>
</fieldset>
<fieldset class="no_border">
<label>Retype: </label><br /><input type="password" class="effect" name="password2" id="password2" autocomplete="off" >
<span id="password2Info">Valid E-mail please, you will need it to log in!</span>
</fieldset>
<div id="button">
<input type="submit" value="Subscribe" name="subscribeForm"/>
</div>
<div id="success">
<strong>Data Saved Successfully.</strong>
</div>
</form>
</div>
Also is there any way i an create a css class for it so that the image is added to the right side of text box once each text box is validated.

Answer 1

try
fieldset input {
float:left;
}
maybe you also need to set the input to inline or inline block if you have set it to block previously.
http://jsbin.com/akiviw/1/edit
or change js
$('#login_id_correct').css('display','block')
to
$('#login_id_correct').css('display','inline-block')