Putting the span on the left

With some great forum help I was able to change my menu line so that the sub menu appears (after a user logs in) next to the main menu.

A part of the menu line, however, I'd like floated all the way to the left side of that line, if possible. I'd like the text: Welcome! You Are Now Logged In, to appear (once a user is logged in) as it does now, but be positioned all the way to the left. It doesn't have to be in a span. Whatever works, I'd appreciate. Can you help me with this? Thanks.

<table>
    <tr>
        <td class="menu"><div class="menu1"> &nbsp; <a href="[var.base_url]">&nbsp;<font color="#333333" face="arial">home</font></a>&nbsp;
                &nbsp;|&nbsp;&nbsp;<a href="page.php?page=16"><font color="#333333" face="arial">faq</font></a> &nbsp;|&nbsp;&nbsp;<a href="[var.base_url]/join.php"><font color="#333333" face="arial">register</font></a> &nbsp;|&nbsp;&nbsp;<a href="[var.login_out_link]"><font color="#333333" face="arial">log in</font></a> &nbsp;|&nbsp;&nbsp;<a href="page.php?page=9"><font color="#333333" face="arial">search</font></a> &nbsp;|&nbsp;&nbsp;<a href="page.php?page=6"><font color="#333333" face="arial">upload</font></a> </div>
            <!--Begin Sub-Navigation.  This only appears when a user is logged in.-->
            <div class="sub-nav">
                <!--submenu 1-->
                <div class="sub-nav-links">
                    <div class="sub-nav1">
                        <p class="account"><span>Welcome! You Are Now Logged In.</span> <a href="members/[var.user_name]"><font color="#000000">my account</font></a> &nbsp;|&nbsp; <a href="logout.php"><font color="#800000">log out</font></a></p>
                        <!--[onload;block=div;when [var.loggedin]=1;comm]-->
                    </div>
                </div>
            </div>
    </tr>
    </td>
    
</table>

Code (markup):

<style>
.menu1 {
    font-size: 11px;
    font-family: arial;
    text-align: right;
    color: #333333;
 text-align: right margin: 0px 22px 0px 0px;
    padding: 0px 0px 0px 0px;
}
.sub-nav {
    font-size: 11px;
    font-family: arial;
    text-align: right;
    color: #333333;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
.sub-nav1 {
    font-size: 11px;
    font-family: arial;
    text-align: right;
    color: #333333;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
.sub-nav-links {
    font-size: 11px;
    font-family: arial;
    text-align: right;
    color: #333333;
    margin: 0px 0px 0px 0px;
}
.menu {width:100%}
.menu1 {float:left}
.sub-nav {float:right}
.sub-nav p {margin:0}

Code (markup):

 

A live URL to the page would've been great.

However try this,

.account span{float:left; position:relative;}

 

Thanks for that but that put the Welcome on the left side of the "my account".
Any additional help will be appreciated.

 

Do you want the text "Welcome! You Are Now Logged In" left of the navigation? or can you just draw quick mock what you intent to do?

 

Thanks for your reply.
I've attached two screen shots. Menu1 image shows the Main nav menu before a user logs in. Menu2 image shows the nav menu after the user logs in.

I'm trying to get the

"my account l credits: l log out"

to appear to the right of the Main nav menu (after the user logs in).

And I'm trying to get

"Welcome! You Are Now Logged In"

to appear to all the way to the left side of the web page (after the user logs in).

Any additional help will be greatly appreciated.