#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    200
    Rep Power
    11

    CSS help - align text right


    OK I have a layer that is described here :


    div#footer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:14;
    background-color: #EED;
    font: 10px Verdana, sans-serif;}


    In this layer I wish to have some text in the left of the bar and at the far right (align-right) some text also ... how would i achieve this ???

    -Thanks-
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Location
    Calgary, AB
    Posts
    152
    Rep Power
    12
    use the text-align property:

    Code:
    <div id="footer">
    	<div style="text-align:left">Left-aligned Text</div>
    	<div style="text-align:right">Right-aligned Text</div>
    </div>
    or personally I'd use:
    Code:
    <div id="footer">
    	<table width="100%" cellpadding="0" cellspacing="0">
    		<tr>
    			<td style="text-align:left">Left-aligned text</td>
    			<td style="text-align:right">Right-aligned text</td>
    		</tr>
    	</table>
    </div>
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    200
    Rep Power
    11
    yea that works BUT it doesn't keep the font style ???
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Location
    Calgary, AB
    Posts
    152
    Rep Power
    12
    add two more styles:

    #footer_left {
    text-align:left;
    font-size: 10px;
    font-family: verdana;
    }

    #footer_right {
    text-align:right;
    font-size: 10px;
    font-family: verdana;
    }


    and update your html to:
    Code:
    <div id="footer">
    <table width="100%" cellpadding="0" cellspacing="0">
    	<tr>
    		<td id="footer_left">Left-aligned text</td>
    		<td id="footer_right">Right-aligned text</td>
    	</tr>
    </table>
    </div>

IMN logo majestic logo threadwatch logo seochat tools logo