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

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        ____________
LVL 2
brgdotnetcontractorAsked:
Who is Participating?
 
Tom BeckCommented:
Here is another way to do that layout:

<style type="text/css">
.fixedWidthLbl {
      width:80px;
      float:left;
      line-height:35px;
}
.fixedWidthTxt {
      width:150px;
      height:20px;
      margin-right:10px;
      border-width:0 0 1px 0;
      border-style:solid;
      border-color:#000;
      float:left;
}
</style>

<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" />
0
 
Berkson WeinTech FreelancerCommented:
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.
0
 
brgdotnetcontractorAuthor Commented:
Cool Tommy boy, it works great!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.