ASP.NET - how to use CSS to align ASP.NET controls in a data entry situtaion?

Question

I have a standard data-entry type form built in ASP.NET. I am pretty green with CSS and am trying to line up the labels and text fields on the form.

I am using the standard ASP.NET controls.

I know from my CSS book and web sites that I could use the label for="" with the name of an input text box to follow and float the labels but I don't how to do this with ASP.NET controls.** This is what I am trying to work with:

<div class="spacer1em"></div>
<div><span>Hotel:</span> <asp:TextBox ID="txtHotel" runat="server" /> <asp:LinkButton ID="lnkMap" runat="server">Map</asp:LinkButton></div>
<div><span>Address:</span><asp:TextBox ID="txtAddress" runat="server" /></div>
<div><span>Address:</span><asp:TextBox ID="txtAddress2" runat="server" /></div>
<div><span>City:</span> <asp:TextBox ID="txtCity" runat="server" /> <span>State:</span><asp:TextBox ID="txtState" runat="server" /> <span>Zip:</span> <asp:TextBox ID="txtZip" runat="server" /></div>
<div><span>Country:</span> <asp:TextBox ID="txtCountry" runat="server" /></div>
<div><span>Phone:</span> <asp:TextBox ID="txtPhone" runat="server" /> <span>Fax:</span><asp:TextBox ID="txtFax" runat="server" /></div>
<div><span>Type:</span><asp:TextBox ID="txtType" runat="server" /></div>
<div><span>Comments:</span> <asp:TextBox ID="txtComments" runat="server" /></div>

Win · Accepted Answer · 2010-11-18 16:49:53Z

10

Here is the method I use.

<div class="row"> 
  <div class="label"> 
    <asp:Label ID="lblHotel" Text="Hotel" runat="server" AssociatedControlID="txtHotel" />:
  </div> 
  <div class="value"> 
    <asp:TextBox ID="txtHotel" runat="server" /> 
  </div> 
</div > 
<style type="text/css">
    .row { clear: both; width: 100%; overflow: hidden; margin: 5px 0; } 
    .label { float: left; text-align: right; margin-right: 10px; width: 150px; } 
    .value { float: left; text-align: left; } 
</style>

edited Nov 18, 2010 at 16:49

answered Nov 18, 2010 at 15:34

Win

62.4k13 gold badges106 silver badges190 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sam Gentile Over a year ago

Shoot! I screwed this up! I don't need both Spans and ASP.NET Labels. They are supposed to be spans and ASP.NET textboxes with each row the labels and the textboxes aligning. I'll rewrite the question.

Sam Gentile Over a year ago

I rewrote the question but nothing needs to change except using the textbox instead of the asp label. It works! Thanks!

Collectives™ on Stack Overflow

ASP.NET - how to use CSS to align ASP.NET controls in a data entry situtaion?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related