Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,683
    Thanks
    28
    Thanked 4 Times in 4 Posts

    How do I get these to line up ?

    Hi,

    Please help if you can.

    How can I get the black constants to line up with the redish titles:





    i.e.
    Client_id: dav195
    Client email: dave.feye@email.com

    ( deliberate typo in email )

    This is my code:


    Code:
    <div class="art_title">
    		<span>Account Name:&nbsp;</span> <input class="data1" style="margin-top:12px;" type="text" name='x_sc_name' size="66" maxlength ="60" value = '<?php echo $N_sc_name ?>' >
    		</div>
    	
    	<div class="art_title">
    		<span>Access Code:&nbsp;</span> <input class="data1" style="margin-top:12px;" type="text" name='x_access' size="66" maxlength ="60" value = '<?php echo $N_access ?>' >
    		</div>
    	<div class="art_title">
    		<span>Client id:&nbsp;</span><span style="color:black; float:left;"><?php echo $this_user ?></span>
    		</div>
    
    	<div class="art_title">
    		<span>Client email:&nbsp;</span> <span style="color:black;"><?php echo $N_email ?></span>
    		</div>

    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,444
    Thanks
    11
    Thanked 310 Times in 309 Posts
    Hard to know without all the surrounding CSS. You certainly don't want that "float:left" in there, and you might put a border around the div "art_title" for testing, I'm guessing that it may be forcing the email address onto the next line because it can't fit inside the box next to "Client email".

    Dave

  • #3
    New Coder
    Join Date
    Sep 2011
    Location
    NY
    Posts
    33
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Why don't you wrap your both span with P tag:
    Code:
    <p><span>Client id:&nbsp;</span><span style="color:black; float:left;"><?php echo $this_user ?></span></p>

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Why not use a <dl> list and make the left column the <dt> tag and the right column the <dd> tag and style them so they go where you want.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Senior Coder
    Join Date
    May 2006
    Posts
    1,683
    Thanks
    28
    Thanked 4 Times in 4 Posts

    Macintosh

    Hi,

    I tried the suggestion for <p></p>
    and also for

    I put in a border and the .art_title is wide enough.

    Dropped the "float:left;" from in line css

    But no improvement.



    The ccs:

    PHP Code:
    .art_title{
        
    width100%;
            
    border:1px solid #000;
        
    padding10px 0 0 10px
        
    margin0 0 0 0px;    
        
    text-alignleft;
        
    float:left;    
        } 
        
    .
    art_title label{
        
    margin0 0 10px 0
        
    width:150px;
        
    vertical-align:top;    
        
    text-align:left;
        
    float:left;
        }

    .
    art_title span{
        
    margin0 0 10px 0px
        
    float:left;
        
    clear:left;
        }
     
    .
    data1 {
        
    float:left;    
        
    border:1px solid #000;
        

    Still can not see why there is a live break.

    Any ideas ?

    Thanks.


    .
    Last edited by jeddi; 02-04-2012 at 08:53 PM.
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #6
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,444
    Thanks
    11
    Thanked 310 Times in 309 Posts
    Presumably you also dropped the float:left from the css you've shown here?

    Dave

  • #7
    Senior Coder
    Join Date
    May 2006
    Posts
    1,683
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Now that my friend is a GOOD question

    I did not remove it because it would have messed up the first span
    and others that use the same class.

    So I inserted this:

    <span style="color:black; float:none;">

    Which cancels the "float:left;" in class ....

    .... It lines up nicely

    Thanks for the question


    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    They're not aligned because of this:

    Code:
    .art_title span {
        clear: left;
        float: left;
        margin: 0 0 10px 0;
    }
    Take that out and give it another try.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •