div tag styling issue

format the <div>

[jankajg]

I have the following aspx code. I want this to look such that home link is on the left corner (left aligned) and the rest on the right corner (right aligned).

Apologies for such basic question. But I ama dumbo as far as html, css is concerned.

any help would be much appreciated.

Thank
Janak

<td colspan="10" bgcolor="#AE3B08" align="right" width="1027px">
<div style="text-align:left;color:White;display:inline">
<asp:HyperLink ID="hlHome" runat="server" ForeColor="white" NavigateUrl="~/Default.aspx">Home</asp:HyperLink>
&nbsp;&nbsp;¦¦&nbsp;&nbsp;
</div>
<div style="text-align:right;color:White;display:inline;">
<asp:LoginView ID="LoginArea" runat="server">
<AnonymousTemplate>
<asp:HyperLink ID="HlLogin" runat="server" NavigateUrl="~/Login.aspx" ForeColor="white">Login</asp:HyperLink>
</AnonymousTemplate>
<LoggedInTemplate>
<asp:LoginName ID="LoginName1" runat="server" FormatString="Welcome, {0}" />&nbsp;&nbsp;¦¦&nbsp;&nbsp;
<asp:HyperLink ID="HLLogout" runat="server" NavigateUrl="~/Logout.aspx" ForeColor="white">Logout</asp:HyperLink>
</LoggedInTemplate>
</asp:LoginView>
&nbsp;&nbsp;¦¦&nbsp;&nbsp;
<asp:HyperLink ID="hlAdmin" runat="server" ForeColor="white">Admin</asp:HyperLink>&nbsp;&nbsp;
</div>
</td>

[le_gber]

Hi jankajg and welcome to WebmasterWorld,

Do you know how wide each section (home, rest of the nav) are? You could just give each a width and play with margin to separate them.

Alternatively try floating the home div to the left and the other dive to the right with
float:left and float:right replacing display:inline in both div inline styling.

[jankajg]

apologies for posting the incomplete code. But that was due to lack of understanding on actual html ui + css.
After spending 'nights under the bulb' i have finally resolved the issue

here is the complete code with the solution

container{
width:100%;
}
#home-container{
width:50%;
text-align:left;
color:White;
padding-left:25px;
float:left;
}
#login-container{
width:50%;
text-align:right;
color:White;
padding-right:25px;
}

<td colspan="10" bgcolor="#AE3B08" align="right" width="1027px">

<div id="container">
<div id="home-container">
<asp:HyperLink ID="hlHome" runat="server" ForeColor="white" NavigateUrl="~/Default.aspx">Home</asp:HyperLink>
</div>
<div id="login-container">
<asp:LoginView ID="LoginArea" runat="server">
<AnonymousTemplate>
<asp:HyperLink ID="HlLogin" runat="server" NavigateUrl="~/Login.aspx"

ForeColor="white">Login</asp:HyperLink>
</AnonymousTemplate>
<LoggedInTemplate>
<asp:LoginName ID="LoginName1" runat="server" FormatString="Welcome, {0}"

/>&nbsp;&nbsp;¦¦&nbsp;&nbsp;
<asp:HyperLink ID="HLLogout" runat="server" NavigateUrl="~/Logout.aspx"

ForeColor="white">Logout</asp:HyperLink>
</LoggedInTemplate>
</asp:LoginView>
&nbsp;&nbsp;¦¦&nbsp;&nbsp;
<asp:HyperLink ID="hlAdmin" runat="server" ForeColor="white">Admin</asp:HyperLink>&nbsp;&nbsp;
</div>
</div>
</td>