Reputation: 2601
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
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
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