Can CSS be used to pad a label control with a certain amount of spaces, or to make a certain length?

Posted on 2012-09-20
Medium Priority
Last Modified: 2012-09-20
Hello, I have some data which I am laying out using
the fieldset command and CSS
So basically on my web page I have several labels and
text box controls. Below is how the data will look on the screen.

So here is my question. Is their a way to style my label controls so that they are always a
certain length, and left justified? If so, how can this be done. For example below, you
can see that the word "phone" represented by a label control is 4 characters in length. How
can I style my label controls, so that they are all a lenght of say at most 12 characters.
Is their a way to do this using CSS?

Otherwise, I am having to use   tags to create spaces, and this seems more like hacking
than a real solution.

First Name __________      Last Name____________
Phone         __________      Email        ____________
Question by:brgdotnet
LVL 15

Assisted Solution

by:Berkson Wein
Berkson Wein earned 80 total points
ID: 38420375
Can you provide a sample of the generated HTML?

If each label is in its own DIV, you could accomplish this like this:
(say the label divs are class="LabelDiv")

.LabelDiv {
width: 100px;   <-- or whatever width you want in pixels
padding: T R B L; <-- top, right, bottom, left.  like: 1px 10px 1px 0;

That would give you a 100 pixel wide div, padded on the right so that there's guaranteed to be a space between the label and the form field.

Hope this helps get you started.
LVL 38

Accepted Solution

Tom Beck earned 800 total points
ID: 38420500
Here is another way to do that layout:

<style type="text/css">
.fixedWidthLbl {
.fixedWidthTxt {
      border-width:0 0 1px 0;

<label for="firstName" class="fixedWidthLbl">First Name:</label><input type="text" id="firstName" class="fixedWidthTxt" />
<label for="lastName" class="fixedWidthLbl">Last Name:</label><input type="text" id="lastName" class="fixedWidthTxt" />
<div style="clear:both"></div>
<label for="phone" class="fixedWidthLbl">Phone:</label><input type="text" id="phone" class="fixedWidthTxt" />
<label for="email" class="fixedWidthLbl">Email:</label><input type="text" id="email" class="fixedWidthTxt" />

Author Closing Comment

ID: 38420636
Cool Tommy boy, it works great!

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses
Course of the Month15 days, 1 hour left to enroll

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question