#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    2
    Rep Power
    0

    Question How left align and right align on same line


    Hello,

    I'd like to left align and right align text on the same line. I can accomplish this using floats, but then I must use the <p> tag which adds line breaks.

    Can I do this without making a new paragraph for each line?
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    298
    Rep Power
    8
    You can use <span> tags to do the very same thing with the floats.

    Test this code:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<title>help</title>
    <style type="text/css">
    
    .left
    {
    	float: left;
    }
    
    .right
    {
    	float: right;
    }
    
    </style>
    </head>
    
    <body>
       <span class="left">Span Left</span>
       <span class="right">Span Right</span>
    </body>
    </html>
    You can actually do the same thing with <p> tags but I think you would need to set widths for each paragraph.

    Does this help at all?

    Regards,

    NM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    2
    Rep Power
    0
    Using the <span> tag gives the same result as the <p> tag.

    Here is the code I use:

    Code:
    <div> <span class="alignleft">Test Company 1</span><span class="alignright">Phone Number</span> <span class="alignleft">Test Company 2</span><span class="alignright">Phone Number</span> </div>
    There is still a space between these two lines. Is there a way I can remove the line break in either <span> or <p>?
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    298
    Rep Power
    8
    Is this what you wanted?
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<title>help</title>
    <style type="text/css">
    
    .left
    {
    	float: left;
    }
    
    .right
    {
    	float: right;
    }
    
    .clear_l
    {
    	clear: left;
    }
    
    .clear_r
    {
    	clear: right;
    }
    
    </style>
    </head>
    
    <body>
      
    <p>
    	<span class="left">Span Left1</span>
    	<span class="right">Span Right1</span>
    	 <span class="clear_l left">Span Left2</span>
       <span class="clear_r right">Span Right2</span>
        <span class="clear_l left">Span Left3</span>
       <span class="clear_r right">Span Right3</span>
    </p>
    </body>
    </html>
    Kind regards,

    NM.
  8. #5
  9. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    165
    Based on your sample code this seems to me a legitimate use for a table, with text-align: left or right.

    Assuming there are just two columns:

    Code:
    table td {
        text-align: left;
    }
    
    table td:first-child {
        text-align: right;
    }​
    "The mysql extension is deprecated as of PHP 5.5.0, and is not recommended for writing new code as it will be removed in the future. Instead, either the mysqli or PDO_MySQL extension should be used." the docs

IMN logo majestic logo threadwatch logo seochat tools logo