Aligning text on same line ignoring space from left and right

Question

my web application is simple: a person enters details in a form, when submitted it comes out this way:

Name: Kyle blah blah First
Name: Josh blah blah Referral

I want it that first and referral are exactly aligned that way, my problem is that if someone enters the name Kyle only, it becomes like this:

Name: Kyle First
Name: Josh blah blah Referral

I don't want that to happen ^.

Here is my code:

 div.inline { float:right; } .clearBoth { clear:both; } 

 <div class="inline">Name:<u>WHATEVERCOMESFROMFORM</u><font style="margin-right: 250px">First</style></div> <div class="inline">Name:<u>WHATEVERCOMESFROMFORM</u><font style="margin-right: 250px">Refferal</style></div> 

Any help?

Answer 1

you can use the old good table tag

 <table> <tr> <td>Name</td> <td><u>looooooooooooooong Word</u></td> <td><u>First</u></td> </tr> <tr> <td>Name</td> <td><u>tiny</u></td> <td><u>Referral</u></td> </tr> </table> 

I hope that this is what you mean

Answer 2

Try to something like this.

 div.inline>u {margin-right: 5px;margin-left: 5px;} 

 <div class="inline"> Name:<u>WHATEVERCOMESFROMFORM</u><font style="margin-left: 5px;font-weight:bold;">First</font> </div> <div class="inline"> Name:<u>Kyle</u><font style="margin-left: 5px;font-weight:bold;">Refferal</style> </div> 

Answer 3

In terms of the layout of the output, comparing:

Name: Kyle blah blah First Name: Josh blah blah Referral

and

Name: Kyle First Name: Josh blah blah Referral

the 'First Name' appears more to the left and nearer to 'Name'. Therefore, I'm assuming you're looking for equal widths for each of these three labels, so that they line up vertically, as there is probably numerous rows of data.

In this case you could add a label or a span tag around 'Name', 'First Name', and 'Referral'. You'd need to careful though, because if someone types some long text, it will wrap over onto the next line. I would use a table. They are designed for this exact purpose - to hold data in an orderly way. And a table will automatically adjust to the available space.

 <style> td { padding-right: 60px; } </style> <table> <tr> <td>Name: Kyle blah blah</td> <td>First Name: Josh blah blah</td> <td>Referral</td> </tr> <tr> <td>Name: Kyle</td> <td>First Name: Josh blah blah</td> <td>Referral</td> </tr> </table> 

Answer 4

Is this what you mean?

 body { background: #111; text-align: center color: #999; color: #999; } .ztable { table-layout: fixed; overflow-x: scroll; } td, th { padding: 15px } 

 <div> <table> <tr> <th>Name:</th> <th>Really loooong name</th> <th>First</th> </tr> <tr> <th>Name:</th> <th>looong name</th> <th>referal</th> </tr> <tr> <th>Name:</th> <th>Short name</th> <th>First</th> </tr> <tr> <th>Name:</th> <th>Jack</th> <th>referal</th> </tr> </table> </div>