I have the following code:
what i want is using css put the "MYIMAGE" on the most right side.
<div style="cursor: pointer;" onclick="javascript:SelectContact('17');" onmouseover="javascript:this.className='onfocus';" onmouseout="javascript:this.className='tempClass';" id="contact_17" class="tempClass">
<input type="checkbox" class="contactChk contactItem" id="chk_17" name="chkContact" onclick="javascript:alert('clicked');"/>
<img height="25" width="25" class="contactItem" src="Images/Contacts/NoImage.gif" alt=""/>
<span class="contactName" id="contactName_17">
Amr ElGarhy
</span>
<img id="MYIMAGE" src="Images/Common/Motiva.png" alt="" class="contactItem"/>
<br/>
</div>
CSS:
.contactChk {
margin-left:10px;
}
.contactItem {
display:inline;
vertical-align:middle;
}
.contactName {
display:inline;
vertical-align:middle;
}
From stackoverflow
-
Try:
img#MYIMAGE { float: right; }Not sure if that'll work - it depends on how
div#contact_17is styled, which isn't clear from your question.Dominic Rodger : hah - given the number of other posts telling you the same thing, I'm guessing this ought to work!Amr ElGarhy : when i gave it float:right; it went right but down, so it appear that its on another rowDominic Rodger : hmmm... try floating the other elements left (the checkbox, the other image and the span) -
Just float it right
#MYIMAGE{ float:right; }It would be a good idea to fix the width of the image too.
-
Try
float:right; -
An alternative is to use absolute positioning.
If #contact_17 is position:relative, you can set #MYIMAGE to position:absolute and set its 'right' property to 0 (or however far from the right edge you desire). Absolute positioning will ignore anything else in the div, though, so if you do that be sure to set the rest of the contents to not overlap.
Dominic Rodger : Good suggestion - this might cause problems in the case where usernames are of unknown length, so be a bit careful. +1 for a good alternative though :)
0 comments:
Post a Comment