Aligning multiple text boxes and labels with CSS

Question

I know this question has been asked already and I've looked through multiple answers but haven't been exactly able to figure this out completely.

I want to align labels so that their last char is aligned together (right side aligned) and I want to align the text boxes that go with them. Here's what I have in my css style sheet class:

.postLabel { display:block; float: left; text-align: right; padding-left:100px; }

.postTextBox { display:block; float: left; text-align: right; padding-left:400px; }

<asp:Label ID="Label1" runat="server" ForeColor="Black" Text="Title: " CssClass = "postLabel"></asp:Label>

<asp:TextBox ID="titleText" runat="server" Width = "213px" CssClass = "postTextBox"></asp:TextBox>

<asp:Label ID="Label2" runat="server" ForeColor="Black" Text="Label2: " CssClass = "postLabel"></asp:Label>

<asp:TextBox ID="Text2" runat="server" Width = "213px" CssClass = "postTextBox"></asp:TextBox>

Problems that I see: This is left hand aligned. the T in Title and L in Label2 are aligned. The labels and the text boxes hug each other too so it does not seem to obey the padding in the .CSS.

Finally, here is what the top of my .aspx page looks like:

  <%@ Page Title="" Language="C#" MasterPageFile="~/Master"     ViewStateEncryptionMode="Always".... %>
  <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
  </asp:Content>
  <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<link href="Style.css" rel="stylesheet" type="text/css" />

Is this where the .css file should be added? I get a error saying that the element 'link' cannot be nested within element 'div'?

Answer 1

Your CSS should be referenced in the document's head, ideally.

If you want to right align those labels, I'd highly recommend doing the following:

1. Create a div to wrap the label and textbox:

   <div class='label-wrapper'>
     <label>Title:</label>
     <input type='text'>
   </div>
   

2. Add the following CSS to your stylesheet:

   div.label-wrapper{
     position:relative;
     width: 400px; /* Set this to however far you want that right align to be from the left */
   }
   div.label-wrapper > label{
     position:absolute;
     right: 0;
     height: 15px; /*Or whatever height you like */
   }
   div.label-wrapper > input[type=text] {
     position:absolute;
     right: 0;
     top: 15px; /* Or whatever you set the label's height to, plus any desired margin */
   }
   

---

Update

Fiddle Example

After seeing your example, here is the CSS you'd need. You'll still need to wrap the elements in a div like I described above.

div.label-wrapper {
  position: relative;
  min-width: 300px;
  max-width: 400px;
  height: 24px;
  display:block;
}
div.label-wrapper > label {
  position: absolute;
  left: 0;
  width: 100px;
  text-align: right; /* not absolutely necessary, but will be if you assign a width to the label */
  white-space: nowrap; /* Again, not totally necessary, but if you run out of space otherwise you'll get multiple lines for your label */
}
div.label-wrapper > input[type=text] {
  position: absolute;
  left: 115px; /* Leaves a 15px gap between end of label and start of textbox.  Increase value if you want more than 15px or decrease if you want less */
}

That'll give you the look you desire.

Answer 2

Add this css file in head content placeholder for try it

<%@ Page Title="" Language="C#" MasterPageFile="~/Master"     ViewStateEncryptionMode="Always".... %>
  <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
 **<link href="Style.css" rel="stylesheet" type="text/css" />**
  </asp:Content>
  <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">