SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast ro88o's Avatar
    Join Date
    Jun 2006
    Location
    Manchester, UK
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Left, Center and Right align on a single line

    Hi,

    I have an h2 tag and two spans that I want to all appear on the same line, the h2 text on the left, one of the spans in the middle and the other span on the right. If I wasn't using an h2 then I know I'd be able to do:
    HTML Code:
    <div style="text-align:center">
        <span style="float:left">Text Left</span>
        <span style="float:right">Text Right</span>
        <span>Center Text</span>
    </div>
    Is there a way I can achieve that but with 'Text Left' in the example above in an h2 tag?

    Cheers
    www.nubornis.com
    Web Development from Nuborn Internet Services

  2. #2
    SitePoint Enthusiast ro88o's Avatar
    Join Date
    Jun 2006
    Location
    Manchester, UK
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have found one method, it's to float each element and then assign it a percentage width like so:
    HTML Code:
    <div id="header">
        <h2 style="float: left; width: 34%; text-align: left;">Text Left</h2>
        <p style="float: left; width: 33%; text-align: center;">Text Middle</p>
        <p style="float: left; width: 33%; text-align: right;">Text Right</p>
    </div>
    Is that the best method or is there a more elegant solution?
    www.nubornis.com
    Web Development from Nuborn Internet Services

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well with your HTML set up like that, float one <span> left, float one <span> right, and give both of them like...a 20&#37; width.

    Then don't float the 3rd span, but give it this: margin:0 20%;

    It's used in Pauls 3col layout technique.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Enthusiast ro88o's Avatar
    Join Date
    Jun 2006
    Location
    Manchester, UK
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well with your HTML set up like that, float one <span> left, float one <span> right, and give both of them like...a 20% width.

    Then don't float the 3rd span, but give it this: margin:0 20%;

    It's used in Pauls 3col layout technique.
    That's the example I gave in the OP that only works for spans however it's not spans that I'm trying to do it with. I'm trying to acheive the same thing but with an <h2> and two <spans>. This obviously doesn't work in the first instance because the h2 will get pushed to a separate line.
    www.nubornis.com
    Web Development from Nuborn Internet Services

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Actually the example I gave does work. It doesn't matter what the element is when you float it. All the same technique.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Enthusiast ro88o's Avatar
    Join Date
    Jun 2006
    Location
    Manchester, UK
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah my bad - you're right, cheers
    www.nubornis.com
    Web Development from Nuborn Internet Services

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Your welcome. It's used in Pauls 3col examples
    Off Topic:

    6k post!
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •