SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Right Aligning a <span>?

    Hi all

    I have my div set up like this
    Code:
    <div id="menu">
    <a href="index.htm" title="Home" class="menu">Home</a>
    <a href="portfolio.htm" title="Portfolio" class="menu">Link 2</a>
    <a href="#" title="Philosophy" class="menu">Link 3</a>
    <a href="#" title="Resume" class="menu">Link 4</a>
    <a href="#" class="menu">Link 5</a>
    <span id="number">555-555-5555</span>
    </div>
    Now, in that same div, which is spreading across the screen, I want to have a phone number. Well, naturally if I was just to have 555-555-5555 after the last link, it would be right next to the last link, but I want it as far to the right side of the div as possible. As you can tell, I have put it in a <span> so that I can control it separetly. Well, in my css I had to add

    span#number {
    margin-left: 300px
    }

    that way it would be 300px from the last link. Anyway to just align it to the right, because if the names of those links change, so do their widths, then the phone number doesn't hug the right side anymore.

    Thanks
    Bryan

  2. #2
    SitePoint Enthusiast [Az]'s Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In your CSS have

    .phone_number {
    text-align: right}

    Then in your HTML have
    <span class="phone_number">555-555-5555</span>

    that should do the trick

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Floating it to the right is probably better, since a <span> is an inline element.

  4. #4
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    damn you guys are fast

  5. #5
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, the text-align right didn't work.

    Then the float: right; didn't work because it put it BELOW the div I want it in.
    Try putting it above the div. Otherwise you'll have to position it absolutely.

  6. #6
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Text-align won't work because it will only align the text of the span within the span. As the span expands and shrinks to match its contents, you're effectively saying right-align these 15 characters in a 15 character field.

    I've not really played around with "float" much, but if Vinnie says it works then I'd believe him

    Personally, I was going to suggest putting the following in your stylesheet:

    #number{
    position: absolute;
    right: 5px;
    }


    Andy
    From the English nation to a US location.

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Float will work if you move the <span> before your links.

  8. #8
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    now why in the world would that work? It did obviously, but I can't figure out why.

    One other thing though, is that when I added the float: right; it actually increased the height of the div element I originally had, so now my links and such are floating in the middle, and when you rollover them, they are no longer touching the respective top and bottom of the div they are in. I hope that made sense.

    Thanks
    Bryan

  9. #9
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    If you want, try this CSS instead:
    Code:
    div#menu {
      position: relative;
      /*the other rules you have go here*/
    }
    div#menu span#number {
      position: absolute;
      top: 0;
      right: 0;
      height: whateverpx;
      width: whateverpx;
    }
    Just change height and width to match whatever dimensions you're trying to work with.


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
  •