SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Multi-Align

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2005
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multi-Align

    How can you make it so i can align some text to the left, and some to the right inside a <td> cell?

  2. #2
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,423
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    Put them into <P> tags and use CSS to align the text. In reality you probably should just use multiple TDs.

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2005
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I do that, I get lots of line breaks:
    Left

    Right
    ^^That kind of thing,but the right displays on the right side.

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Make your p text-align: right and then put the bit that goes left inside a span with float: left.

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2005
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I still get a line break inbetween the left and the right text. If i use <p> it automatically inserts 2 line breaks for some reason.

  6. #6
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    p does not insert line-breaks. Block-level elements normally stack on top of each otherd and p also has some browser-default margins. The reason for this is because paragaphs on a page do not normally sit in-line, and have white-space to separate one from one another.

    HTML Code:
    <td class="something"> 
    <p><span>Left Text</span> Right Text</p>
    </td>
    CSS:
    Code:
    .something p { 
    text-align: right; margin: 0;
    }
    
    .something p span { 
    float: left;
    }
    The solution above presumes you will not be dealing with more than one line of text on either side.

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2005
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that works great!


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
  •