SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Non-Member
    Join Date
    Mar 2006
    Location
    San Antonio, Texas
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to display on same line?

    Folks,
    I am working on a 3 column CSS layout, but there's a section where I want to display text on the same line. I've highlighted the stuff I want on the same line by displaying a background color for now:

    Here's my code:
    <div style="background: #00FF00">
    Sport Pilot News
    <span style="display: inline; float:right; background: #FFFF00">Submit a News Item</span>
    </div>
    <br />

    And here's the page:
    http://www.sportpilot411.com/index2.php

    How do I get it on the same line?
    Thanks for your advice!
    -Nick

  2. #2
    SitePoint Guru
    Join Date
    Aug 2003
    Location
    CT
    Posts
    643
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS:
    Code:
    
    div.row span.left {
      float: left;
      text-align: left;
      font-weight: bold;
      color: #fff;
      width: 49%;
      }
    
    div.row span.right {
      float: right;
      text-align: right;
      font-weight: bold;
      color: #fff;
      width: 49%;
      }
    HTML:


    Code:
    <div style= "width: 90%; background-color: #666;
    border: 1px solid #333; padding: 0px; margin: 0px auto;">
    <div class="spacer"></div>
    
    <div class="row"><span class="left">
    Home > Products</span>
    <span class="right">
    [logo]</span></div>
    
    <div class="spacer"></div>
    
    </div>
    from: http://www.alistapart.com/articles/practicalcss/
    My Blog: SkeyMedia.com

  3. #3
    Non-Member
    Join Date
    Mar 2006
    Location
    San Antonio, Texas
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you. I applied it to my site and it works fine in IE, but it goes crazy in FF. Any ideas?

  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)
    Another way to do it is to set the text-alignment of the element to the right and then you only need to float the first <span> to the left.


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
  •