Lining up labels in separate
elements

Question

I don't have a lot of experience working on the front end, so I am trying to get better with it. One of the things I have read is that it is better to use and CSS for layout instead of using tables. This what I am attempting to do, but I cannot figure out how to get things to line up properly.

For instance I get

[Name]..[TextBox]
[Master Name]..[TextBox]

What I want is

[Name]..............[TextBox]
[Master Name]..[TextBox]

Below is the HTML I have created. (Sorry for the awkwardness, Stack Overflow's code block is not working well for me. It is also not displaying the final closing div elements.)

 <div id="info1" style="background-color:#ffffff;float:left;width:100%;height:50px">
    <div id="Name" style="background-color: #ffffff; float: left;">
        <label for="txtName" style="display:inline;padding-right:1em;">Name:</label>
            <input type="text" id="txtName" style="width:150px;" />      
       <button id="btnSelect">...</button>
       </div>
</div>

    <div id="info2" style="background-color:#ffffff; float: left; width: 100%; height: 50px">
    <div id="masterName" style="background-color: #ffffff; float: left;">
        <label for="txtMasterName" style="display:inline;padding-right:1em;">Master Name:</label>
        <input type="text" id="txtMasterName" /> 
    </div>
</div>

Thanks Billy. That is my end goal here, just haven't gotten that far yet. :) — Dave, Feb 24 '14 at 19:43

score 3 · Answer 1 · answered Feb 21 '14 at 22:26

3

Make your labels inline-block and set a width for them. The width will create the column effect for you:

label {
    display: inline-block;
    width: 200px;
}

Here's a fiddle to demonstrate the general idea.

answered Feb 21 '14 at 22:26

kinakuta

9,029
1
39
48

Kinakuta, that example is using
elements. Should I be using those instead of
?
– Dave Feb 24 '14 at 19:51
that depends on how the form is divided up - forms should use fieldsets, but you don't need a new fieldset for each label/input pairing - refer to MDN to learn more about fieldsets: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset - ultimately the key point is to use inline-block and set widths for the labels to create the effect you want – kinakuta Feb 24 '14 at 19:56

score 2 · Accepted Answer · edited May 23 '17 at 11:57

2

When people say not to use tables for layout, they mean site layout.

it is still acceptable to use tables in situations such as this, or, say a checkout cart

Have a look at this question and the correct answer on tables.

edited May 23 '17 at 11:57

Community

1
1

answered Feb 21 '14 at 22:19

Bill

3,478
23
42

Thanks @Dave hope it helped. If you feel my answer answered your question don't forget to accept it ;) – Bill Feb 24 '14 at 22:22

Lining up labels in separate elements

2 Answers2

Lining up labels in separate
elements