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
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

    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

    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" />
    LVL 2

    Author Closing Comment

    Cool Tommy boy, it works great!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: CSS Specialist

    We don’t have to sell you on the idea of becoming a developer. If you’re you here, you already know it’s one of the most lucrative (and fastest growing) career tracks out there. It’s CSS that allows you to set yourself apart from other web and mobile developers.

    Suggested Solutions

    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
    In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

    758 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

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now