Having Trouble Arranging HTML Elements - html

Question

I'm designing a form with a number of labels and input controls. They won't necessary fit within a tabular form because the columns do not line up in each row.
So, for example, it may look something like this:
Label1: Label2: Label3:
[Input1] [Input2 ] [Input3 ]
Label4: Label5:
[Input4 ] [Input5 ]
Label6: Label7: Label8:
[Input6 ] [Input7 ] [Input8 ]
The biggest issue is that I want the label to always be left-aligned with the input control. Can anyone make some suggestions as to the best way to style this? An existing example would be perfect!
Techniques I've considered include using a table, floating <div>s, and combinations of the two. I'm getting close but it's a lot of markup and I'm not confident that it's a good way to approach all browsers.
Thanks for any tips.

Answer 1

I would suggest that you should find the best structure for your form first before jumping into any design using CSS. The reason is that you'll be compromising users who doesn't have / disabled their CSS. See Progressive Enhancement.
Think of this way:
Am I making a tabular data? No? Then it's probably just a list of <label> and <input> pairs
Should they be listed by order? Then use <ol> No? Then use <ul>.
Are ALL these lists related to each other? No? then wrap them inside a <fieldset> not <div>s
Do they work and look ok even without any images or CSS? No? then Iterate from step 1.
Some things to consider:
<table> should only be used for tabular data, not for any layout. See Why tables for layout is stupid.
<input> and <label> are by default both an inline-level element, meaning, they will align on each other automatically. So using float:left or display: inline-block will not help, but rather create another problem you'll have to deal later on.
<div> (also <span>) should always be a last option. See Semantics.
Example:
In order for you to picture them out, here's the output:
Markup without CSS:
Markup with CSS:
The Semantic Markup:
<form action="" method="">
<fieldset>
<legend>Title of this set: </legend>
<ol>
<li>
<label for="input1">Label1: </label>
<input type="text" id="input1" size="31" />
</li>
<li>
<label for="input2">Label2: </label>
<input type="text" id="input2" size="31" />
</li>
<li>
<label for="input3">Label3: </label>
<input type="text" id="input3" size="31" />
</li>
</ol>
</fieldset>
<fieldset>
<legend>Title of this set: </legend>
<ol>
<li>
<label for="input4">Label4: </label>
<input type="text" id="input4" size="31" />
</li>
<li>
<label for="input5">Label5: </label>
<input type="text" id="input5" size="31" />
</li>
<li>
<label for="input6">Label6: </label>
<input type="text" id="input6" size="31" />
</li>
</ol>
</fieldset>
<fieldset>
<legend>Title of this set: </legend>
<ol>
<li>
<label for="input7">Label7: </label>
<input type="text" id="input7" size="31" />
</li>
<li>
<label for="input8">Label8: </label>
<input type="text" id="input8" size="31" />
</li>
<li>
<label for="input9">Label9: </label>
<input type="text" id="input9" size="31" />
</li>
</ol>
</fieldset>
</form>
The CSS Code:
ol {
margin-right: 1em;
padding-left: 0;
}
li {
display: inline-block;
}
fieldset {
border: 0;
}
input {
display: block;
}
legend {
display: none;
}
Further notes:
We included a size=31 because it will, at least accommodate more viewable space for users who input data in the field.
The <form> remains usable even when the CSS is not available or turned off.
The <legend> helps the user understand the relation of the fields on each other.

Answer 2

Make your labels inline-block elements, and give them a width that matches the associated inputs.

Answer 3

I think the best solution would be to wrap each row of inputs in its own div, then individually wrap each input and label in ITS own div, making it easy to left align the labels.
Here's an example: http://jsfiddle.net/5zNHj/24/

Answer 4

Here's something I quickly worked through using CSS and a little basic HTML knowledge. Might not be the prettiest way to do it, but it's definitely fast to code out. I've added comments in the code to explain myself (hopefully) relatively clearly. Feel free to ask any questions and I'll try to help you out, even though I'm still a beginner. Good luck! http://jsfiddle.net/Cwca22/Z2ySD/