Dave
Dave

Reputation: 2601

Lining up labels in separate <div> elements

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>

Upvotes: 1

Views: 82

Answers (2)

kinakuta
kinakuta

Reputation: 9037

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.

Upvotes: 3

Bill
Bill

Reputation: 3517

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.

Upvotes: 2

Related Questions