SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floating Text right in a table

    Hi all,

    I need to quickly put together a site and therefore I'm relying on my stronger HTML skills VS CSS skills at the moment.

    One thing I am trying to do is float footer text right to separate from text on the left. What is happening is the text I float right is lower than the text on the left and I want them to be positioned the same (as if they are on the same line).

    Here is the CSS I am using:

    Code:
    #footer p {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #A5A5A3;
    	margin: 10px 7px 0 7px;
    	padding: 0;
    }
    
    #footer a {
    	color: #A5A5A3;
    	font-size: 11px;
    	text-decoration: none;
    	font-weight: normal;
    }
    
    #footer  {
    	color: #15345B;
    	font-size: 11px;
    	text-decoration: none;
    	font-weight: normal;
    	clear: both;
    	position: relative;
    	text-align: left;
    }
    
    #footer p span {
    	font-size: 11px;
    	float: right;
    	clear: both;
    }

    Here is the HTML I am using:

    Code:
    <table id="footer" align="center" width="778" border="0" cellpadding="0" cellspacing="0">
    	<tr>
    		<td width="200" height="17" background="graphics/footer_leftbg.gif"></td>
    		<td width="569" height="17" background="graphics/footer_rightbg.gif"></td>
    		<td width="7" height="17" background="graphics/footer_leftbg.gif"></td>
    	</tr>
    	<tr>
    		<td colspan="3">
    		<p>This text should stay left <span>Span This Text Right</span></p>
    		</td>
    	</tr>
    </table>


    I could easily just divide the table into a few cells and fix my problem, but I have done this with CSS before and I can't remember how to avoid making the span text appear lower than the text on the left, so that they are in line with each other...

    Any takers?

    Cheers

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I'm pretty sure the problem with your current way is caused by the <span> placement. To stay aligned to the top, it should be placed in front of the content:

    Code:
    		<td colspan="3">
    		<p><span>Right Text</span>This text should stay left </p>
    		</td>

    Alternatively, something like this will work:
    Code:
    		<td colspan="3">
    		<p class="left">This text should stay left </p> <p class="right">Right</p>
    		</td>
    Code:
    .left {
    float: left;
    }
    
    .right {
    float: right;
    }

  3. #3
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are absolutely right...I needed to put the spanned text at the beginning. I don't understand why, however...I would think it shouldn't make a difference.

    Thanks!

  4. #4
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by JoeSomebody
    I don't understand why, however...I would think it shouldn't make a difference.
    I'm not 100% certain on how they work, so I'll keep my theory to myself. Hopefully someone else here can explain.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •