Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

January 21, 2010

ASP.NET: Aligning Text

Filed under: ASP.NET,C#,VB.NET @ 12:40 pm

Most ASP.NET best practice guides recommend laying out pages using Div tags instead of Tables for better performance and control. With that in mind, how do you align multiple text strings in a single row?

For example, a title bar on a section of an ASP.NET page may look like this:

image

The centered title defines the content of this section of the page. The right-aligned title is a hyperlink that pops open a dialog and allows the user to set preferences for this section.

This layout would be easy enough to achieve with an HTML table. (Or a Silverlight StackPanel, but this example is for ASP.NET.) However, the goal here is to do it with Div tags.

As with most of ASP.NET, the primary way to achieve this desired result is using the "Guess and Check" technique I described in a prior post. If you missed it, here is a quick review:

  • Guess a key word or two describing what you are trying to accomplish
  • Goggle/Bing
  • Use the results to make a guess on some code (or if you look at a result and say "it can’t take 2 pages of code to accomplish this!" then repeat the prior step)
  • Run (F5) to check
  • Repeat until something miraculously works

(And if you have to support multiple browsers, you may have to repeat the last two steps for each browser.)

Using this technique, I found that the following Div tag provides the title bar shown above:

In HTML:

<div >
    <!– Empty label for blank left spacing (to center the text) –>
    <asp:Label ID="EmptyLabel" runat="server"
        Text="&nbsp;" style="float:left;width:33%;text-align:left;background-color:#BD2E26"/>
    <asp:Label ID="Label1" runat="server"
        Text="Customer Management" style="float:left;width:34%;text-align:center;background-color:#BD2E26;color:White;font-family:Calibri"/>
    <asp:HyperLink ID="PreferencesLink" runat="server"
        style="float:left;width:33%;text-align:right;background-color:#BD2E26;color:White;font-family:Calibri"
        Text="Preferences&nbsp;&nbsp;" />
</div>

The key to this technique is to divide the title bar into three segments. Set each segment using a float:left style. This stacks the segments together starting at the left.

Set the widths to 33%, 34%, and 33% to take up the full space within its container. Adjust as needed for the design effect you are trying to achieve.

Finally, set the text-align to the correct alignment for each segment. For the first segment, it does not matter because no text is displayed. For the middle segment use text-align:center and for the right segment use text-align:right.

Notice that you must provide some text in the empty label for this to work correctly. This codes just uses &nbsp; to put in a non-breaking space.

Use this technique any time you need to stack text within single line and you don’t want to use a Table.

Enjoy!

9 Comments

  1.   Andy — January 22, 2010 @ 10:21 am    Reply

    Just starting to get my head into css and you can achieve this in single div. The css below pushes the link up into the div using a negative top margin:

    <div style=’background-color:#BD2E26;color:White;font-family:Calibri;height:20px; text-align: center;’>
    Customer Management
    <asp:HyperLink ID=”HyperLink1″ runat=”server” style=’float:right;margin-top:-20px;’ Text=’Preferences  ‘ />
    </div>

  2.   caver — January 22, 2010 @ 11:20 am    Reply

    Deborah, you posts are always great to read.

    I see how this technique would work, but I have a basic reality check. That is, do the apparently reduced options available when relying on

    really beat out using tables for layout? I am a hack when it comes to html, but tables have always worked ok for me. I have not seen substantial performance hits from tables, and they seem so much more intuitive to use for layout than simply using
    . Laying out a complex page using only div…I can hard hardly imagine how difficult that would be.

    A lot of complex asp.net sites seem to use tables for layout anyways…I know div is the trend, but unless the light comes on for me and I can get div to help organize pages as logically as tables do, not sure I’ll focus on it very much.

    Your post is interesting because is shows how to solve a fundamental layout problem with div…with some more tips like this under my belt maybe div would start to make more sense.

  3.   DeborahK — January 22, 2010 @ 6:28 pm    Reply

    Hi caver –

    Thanks for visiting my blog. Here are some links to some

  4.   renantech — February 7, 2010 @ 7:03 pm    Reply

    asp.net 2010 version is great because of the improve features and easy to use.

  5.   Gerry Franz — February 10, 2010 @ 2:38 pm    Reply

    ASP.Net appears to have a quirk with a set of label controls in a gridview row. If one of the labels in a given row has no text, the alignment of labels left to right in the grid is slightly collapsed–even if a width is specified. The consequence is that columns don’t line up anymore.

    I am using one column in a gridview row with multiple labels, spaced with the width attribute. I am using one column because the row contains a child grid, and I want to display the child rows in all the horizontal real estate of the parent row.

    Any thoughts on how to prevent the collapsing labels?

  6.   DeborahK — February 10, 2010 @ 3:17 pm    Reply

    Often, putting in  “& n b s p ;”  instead of an empty value helps with the spacing.

    NOTE: I put in the correct character sequence but the post converted it to a non-breaking space so you could not see it. Just use everything between the quotes and remove the spaces.

    Let us know if it works for you.

  7.   Gerry Franz — February 11, 2010 @ 8:14 am    Reply

    The problem was slightly different from what I described. The labels weren’t collapsing–the space between them was. Nevertheless, inserting a nbsp character into an empty label did fix the problem. Thanks.

  8.   AbdulOdonnell — November 26, 2012 @ 5:29 am    Reply

    ASP.Net appears to have a quirk with a set of label controls in a gridview row.

  9.   Jonas Schneider — December 11, 2012 @ 5:15 am    Reply

    This layout would be easy enough to achieve with an HTML table. Or a Silverlight StackPanel, but this example is for ASP.NET.

RSS feed for comments on this post. TrackBack URI

Leave a comment

*

© 2014 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs