Question

I have the css layout: One column fixed width layout, from maxdesign.com

the following is the navigation div:

<div id="navigation">
        <ul>
            <li><asp:LinkButton ID="lkbDataEntry" runat="server">Data Entry</asp:LinkButton></li>
            <li><asp:LinkButton ID="lkbReports" runat="server">Reports</asp:LinkButton></li>                
        </ul>           
    </div>  

Now, I want to place an asp:label with the current user logged in, in the same navigation div by doing this:

 <div id="navigation">
        <ul>
            <li><asp:LinkButton ID="lkbDataEntry" runat="server">Data Entry</asp:LinkButton></li>
            <li><asp:LinkButton ID="lkbReports" runat="server">Reports</asp:LinkButton></li>                
        </ul>  
        <div id="username">
            <asp:Label ID="lblUsername" runat="server" Text="User name"></asp:Label>
        </div>         
    </div>  

with the css code:

    #navigation
{
    float: left;
    width: 960px;
    background: #1f2d3a;    
}

#navigation ul
{
    margin: 0;
    padding: 0;
}

#navigation ul li
{
    list-style-type: none;
    display: inline;
}

#navigation li a
{
    display: block;
    float: left;
    padding: 1px 5px;
    color:#fff; 
    font-size: 14px;
    /*font-weight: bold;*/  
    border-right: 1px solid#fff;
}

#navigation li a:hover { background:#0c749b; }

    #username
{
    float: right;
    padding-right: 5px;
    color:#fff;
}

But the label is always shown below the line of menu items, at the right but below them.

Can someone help me?

Answer 1

Why not place the label in a right floated li, inside #navigation? Your CSS can stay the same, since #username is floated right already.

<div id="navigation">
        <ul>
            <li><asp:LinkButton ID="lkbDataEntry" runat="server">Data Entry</asp:LinkButton></li>
            <li><asp:LinkButton ID="lkbReports" runat="server">Reports</asp:LinkButton></li>                
            <li id="username"><asp:Label ID="lblUsername" runat="server" Text="User name"></asp:Label></li>
        </ul>  
</div>