Tuesday, June 04, 2013

How to Left align some text and Right align some other text ON THE SAME LINE

Here is a neat trick I learned recently on how to Left align some sample text (say "Hello Ragav")  and Right align some different text (say "www.klstinc.com") on the same line, so that the final look is something like below


Hello Ragav                                                                                                                 www.klstinc.com


Step 1: For the left align text use a <p>, <div> tag with style attribute value set "float:left". For example - <div style="float:left">Hello Ragav</div>

Step 2: For the right align text use a <p>, <div> tag with style attribute value set "float:right". For example - <div style="float:right">www.klstinc.com</div>

Step 3Clear your float by adding the line below <div style="clear: both;"></div>

In Summary, to implement the above left and right aligned text in same line the final HTML block should look something like below:

<div style="float:left">Hello Ragav</div>
<div style="float:right">www.klstinc.com</div>
<div style="clear: both;"></div>
 
 

No comments: