SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member Prospero's Avatar
    Join Date
    Jan 2004
    Location
    Chicago
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Alignment Trick?

    I'm using the following simple stylesheet rules:

    Code:
    h3 span.info {
     text-align: left;
     }
     
     h3 span.sig {
     text-align: right;
     }
    Applied to the following simple block of xhtml"
    Code:
    <h3>
     <span class='info'>Baseline Content Info</span>
     <span class='sig'>Baseline Sig</span>
      </h3>
    I'm trying to get both lines of text (Baseline Content Info, Baseline Sig) to appear on the same line in the h3 block, just at opposite ends of it. It seems like it should be simple, but I've been trying to play around with it to no avail - if at all possible, I'd like to try and avoid using additional div's and determining the positions absolutely, but I'm not sure if there is any other way to do it. Any help would be greatly appreciated, if someone has come across a similar problem and worked around it.

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    h3 span.info {
    text-align: left;float:left;
    }

    h3 span.sig {
    text-align: right;float:right;
    }

    h3 span{display:block;}

  3. #3
    SitePoint Member Prospero's Avatar
    Join Date
    Jan 2004
    Location
    Chicago
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That put the alignment exactly where it needed to be..but it removed all of the CSS formatting I had previously applied to the h3 block...do I just need to apply it individually to the span groupings then instead?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,775
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Spans are inline elements and therefore there is no left and right in them as they are just content width so text-align applied to them is nonsensical. You will need to use floats as all4nerds has shown or as this simple example .

    http://www.pmob.co.uk/temp/leftandright.htm

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Prospero
    That put the alignment exactly where it needed to be..but it removed all of the CSS formatting I had previously applied to the h3 block...do I just need to apply it individually to the span groupings then instead?
    Hello

    Sorry you can leave the display block out

    h3 span.info {
    text-align: left;float:left;
    }

    h3 span.sig {
    text-align: right;float:right;
    }

  6. #6
    SitePoint Member Prospero's Avatar
    Join Date
    Jan 2004
    Location
    Chicago
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fantastic, thanks Paul, all4nerds - works perfectly, and I appreciate the quick aid.


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
  •