2

I was trying to set the alignment of elements within my web page that has some ASP.NET controls. Inside, the div tag, I need to set the alignment of Label control so that it is always right aligned in div.

How can I set this? Thanks!

Edit: Here's the HTML code:

<div id="UserLoggedinMessage" style="float:right; width:280px">    
    <div style="float:right;width:350px">
        <asp:Label ID="Label3" runat="server"></asp:Label>     
        <asp:LinkButton ID="LinkButton1" runat="server" onclick="LinkButton1_Click">Login now</asp:LinkButton>     

        <!-- Serch Box -->    
        <div id="WLSearchBoxDiv" style="float:right">    
        </div>
        <!-- Seach Box -->
    </div>
</div>

So, this gives me my search box and Login Button in the same line. But the Login button is left aligned. I have correct this.

3
  • Perhaps some source and context to provide more precise answers? The answers below are correct semantically, but there may be other factors which make them less than ideal (as you suggest in comments). Jan 21, 2011 at 13:49
  • Are you using the developer tools included with IE8? Click the "f12" key and it will bring up the developer console. It's a pretty awesome feature. It will help you understand how your page is being rendered. Jan 21, 2011 at 13:49
  • @Joel: Editted and added the code
    – Cipher
    Jan 21, 2011 at 13:54

5 Answers 5

2

Here is my stab at it, but I'm making some assumptions about how you want things positioned. By using float:right; on each separate div, you can remove any extra spacing generated, and by reordering them in reverse you can get them to line up from right to left properly:

<div id="UserLoggedinMessage" style="float:right; width:280px;">

    <!-- removed width of 350, 350 inside div of 280 doesn't make sense -->
    <!-- also separated everything into separate divs and reordered them -->
    <div style="float:right;">
        <asp:LinkButton ID="LinkButton1" runat="server" onclick="LinkButton1_Click">Login now</asp:LinkButton>
    </div>  
    <div style="float:right;">
        <asp:Label ID="Label3" runat="server" />
    </div>
    <!-- Search Box -->
    <div id="WLSearchBoxDiv" style="float:right">

    </div>
    <!-- Seach Box -->
</div>
1
  • Oops, I just missed that because of 350 inside 280. Thanks!
    – Cipher
    Jan 21, 2011 at 14:07
0

You can take another div control in div and set style float:right to inner div.

1
  • That adds another line and which I cannot allow in my case :-/
    – Cipher
    Jan 21, 2011 at 13:45
0

try this :

<div style="float:right">
  This is some text and or other controls
</div>

supplying the 'div' with this formatting will move all the inner contents to the right-most position.

0

You could try absolute positioning of the label, ie. { position: absolute; right: 0 }. This would however mean that the parent needs to be absolute positioned as well, which might be an issue.

Providing more code might us help single out a good solution.

0

In the style attribute, insert this:

line-height:25px;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.