How to applay css setting to User Name in bellow scenario

How to applay css setting to User Name in bellow scenario

HTML:
<div class="tagline">Web Portal Name</div><br />
<div id="logged_in_user_dtls" style="color:#FFF; margin-top:15px;
font:bold; width:100%; position:relative;
margin-left:800px;float:left;">
<span> Welcome <?php echo $_SESSION['userName'] ?> </span>
| <a href="login.php"><span> Sign Out</a> </span> </div>
In my web templete, I'm displaying logged in user name followed by welcome
message.
Problem: When My user name is long(approx 30 char) my next link which is
(sign out link), is moved to right hand side.
How can I avoid moving this Sign out link to the right. I know it may have
simple answer but unable to figure it out.
Note: I tried to change marigin-left setting, but its spoiling my alignment.