How to style header element so that logo is fixed at the left and login status fixed at the right

I need to do something similar to what Experts Exchange has done with its header.  My logo is floated to the left of the header and the profile link is fixed at the right of the same element.

I'm including my HTML and CSS for the elements involved in this.  The element that I need to fix in the upper right of the header element is in the div called MPLoginView.  I've tried floating the logo left and MPLoginView right but this doesn't seem to work.  Can someone help explain how I should do this?  Thanks!

HTML

        <div id ="PageWrapper">
            <header>
                <div class="MPLogo">LOGO IMAGE GOES HERE</div>
                <div class="MPLoginView">
                    <asp:LoginView runat="server">
                        <AnonymousTemplate>
                            <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/Register.aspx">Register</asp:HyperLink>
                            <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Login.aspx">Login</asp:HyperLink>
                        </AnonymousTemplate>
                        <LoggedInTemplate>
                            Logged in as <asp:LoginName runat="server" /> | <asp:LoginStatus runat="server" />
                        </LoggedInTemplate>
                    </asp:LoginView>
                </div>
            </header>
            ...
       </div>

Select allOpen in new window

CSS

body {
    background-image:url("/Images/CalendarBG.jpg");
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-size:small;
    padding:0% 10% 0% 10%;
}

header{
    display:inline-block;
}

.MPLogo{
    float:left;
}

.MPLoginView{
    
}

#PageWrapper {
    background-color:white;
    padding:10px;
}

Select allOpen in new window