Jump to content

HOWTO: Align right


Jack Tripper

Recommended Posts

i want my <SPAN id="EditDiscount "> to be right aligned inside its table cell

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><HTML>  <HEAD>     <STYLE type="text/css">       SPAN#EditDiscount {          text-align: right;          border: 1px solid red;       }       IMG {         vertical-align: middle       }     </STYLE>  </HEAD><BODY>  <TABLE style="width: 100%" border="1">    <TR>      <TD style="width: 60%">        <SPAN id="lblThirdPartyDiscount">Third Party Discount</SPAN>        <SPAN id="EditDiscount"><IMG src="EditDiscount.gif">Edit Discount</SPAN>      </TD>      <TD>$123.45</TD>   </TR>  </TABLE></BODY></HTML>

i've tried using text-align: right on the SPAN i want aligned right; and i've tried float: left on the SPAN on the left. Niether work. Any ideas?

Link to comment
Share on other sites

i want my <SPAN id="EditDiscount "> to be right aligned inside its table celli've tried using text-align: right on the SPAN i want aligned right; and i've tried float: left on the SPAN on the left. Niether work. Any ideas?

Try using "div" instead of "span". See if that helps.
<!doctype html public "-//w3c//dtd html 4.0//en"><html>  <head>        <title>A title here</title>         <style type="text/css">       div#editdiscount {          text-align: right;          border: 1px solid red;       }       img {         vertical-align: middle       }     </style>  </head><body>  <table style="width: 100%" border="1">    <tr>      <td style="width: 60%">        <div id="lblthirdpartydiscount">third party discount</div>        <div id="editdiscount"><img src="editdiscount.gif" alt="">edit discount</div>      </td>      <td>$123.45</td>   </tr>  </table></body></html>

I would also like to add as a suggestion that yourcss would be better if it didn't use any capital letters.Instead, I would suggest an _ (Underscore) to seperatewords (looks a lot better) :)

Link to comment
Share on other sites

Try using "div" instead of "span". See if that helps.
DIV puts it on a new line. i need it on the same line.
I would...suggest that your css didn't use any capital letters. Looks a lot better
i fully, completely and totally disagree. It's a matter of preference, and my preference is that anyone using underscores to separate words be shot. But that's just my opinion.
Link to comment
Share on other sites

<!doctype html public "-//w3c//dtd html 4.0//en"><html>...</html>

Oh, i see you changed my HTML style syntax to xhtml style syntax. This site is not xhtml, it's not even strict HTML, and we can barely make it transitional HTML.As evidenced by the fact that i can't align right using CSS.
Link to comment
Share on other sites

Try this<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><HTML><HEAD><STYLE type="text/css"> DIV#EditDiscount { float:right;text-align: right; border: 1px solid red; }IMG { vertical-align: middle }</STYLE></HEAD><BODY><TABLE style="WIDTH: 100%" border="1"><TR><TD style="WIDTH: 60%"><div style="float:left;" id="lblThirdPartyDiscount">Third Party Discount</div><DIV id="EditDiscount"><IMG src="EditDiscount.gif">Edit Discount</DIV></TD><TD>$123.45</TD></TR></TABLE></BODY></HTML>

Link to comment
Share on other sites

Try this
Now any way to make both items vertically aligned middle?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><HTML><HEAD>	<STYLE type="text/css">   DIV#lblThirdPartyDiscount {     border: 1px solid green;    float: left;  }  DIV#EditDiscount {     float:right;    border: 1px solid red;  }  IMG { vertical-align: middle }	</STYLE></HEAD><BODY>	<TABLE style="WIDTH: 100%" border="1">  <TR> 	 <TD style="WIDTH: 60%">    <DIV id="lblThirdPartyDiscount">Third Party Discount</div>    <DIV id="EditDiscount"><IMG src="EditDiscount.gif">Edit Discount</DIV> 	 </TD> 	 <TD>$123.45</TD>  </TR>	</TABLE></BODY></HTML>

Link to comment
Share on other sites

DIV puts it on a new line. i need it on the same line.i fully, completely and totally disagree. It's a matter of preference, and my preference is that anyone using underscores to separate words be shot. But that's just my opinion.

:) You're welcome.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...