aligning elements using div - html

Question

i have my form and it looks like this
<form>
<fieldset>
name:textbox
lastname:textbox
address:textbox
</fieldset>
</form>
and i want my page to align its elements like
<form>
<fieldset>
name: textbox
lastname: textbox
address: textbox
</fieldset>
</form>
i am just using divs is there any other way to achieve this other than using tables?i need to align this elements to give my page a better navigation of inputs.

Answer 1

Use the table-related CSS display values to style block elements as though they were in a table:
display: table
display: table-row
display: table-cell
This will cause your block elements to behave as though they were <table>, <tr>, and <td> elements respectively.

Answer 2

Yes, it's possible just to use divs. Also, I'd use <input> so the user can actually type something in for your inputs.
HTML
<div>
name: <input type="text" />
lastname: <input type="text" />
address: <input type="text" />
</div>
CSS
input {
display: block;
}
http://jsfiddle.net/XzSGd/

Answer 3

<form>
<fieldset>
<label>name:</label> textbox
<label>lastname:</label> textbox
<label>address:</label> textbox
</fieldset>
</form>
If you use an additional tag around, you can set the css to be as follows:
label {
display: inline-block;
width: 100px; //whatever width suits you
}
This way, all the labels will be the same width and, as long as the text is shorter than that, they will make the textboxes align.

Answer 4

You could use classes for the labels. See code below
HTML
<form>
<fieldset>
<span class="label">name:</span> textbox
<span class="label">lastname:</span> textbox
<span class="label">address:</span> textbox
</fieldset>
</form>
CSS
.label{
display:inline-block;
width:150px;
}
*Change the width according to your need.

Answer 5

This is how I would do it. Float everything. Each textbox/label combo gets its own div, which makes it easy to apply a responsive design framework. Make this as narrow as you want by styling the fieldset. Obviously(?) you would want to include names for each input, and for-attributes for the labels.
http://jsfiddle.net/s3jn3/
input {
float: right;
margin-top: 0.5em;
}
label {
float: left;
}
fieldset>div {
clear: both;
}
<fieldset>
<div>
<label>Item A</label>
<input type="text" />
</div>
<div>
<label>Item B</label>
<input type="text" />
</div>
<div>
<label>Item C</label>
<input type="text" />
</div>
</fieldset>

Answer 6

Try to put it in table, like so:
<form>
<fieldset>
<table>
<tr><td align="left">name:</td> <td>textbox</td>
<tr><td align="left">lastname:</td> <td> textbox</td>
<tr><td align="left">address:</td> <td>textbox</td>
</table>
</fieldset>
</form>