Question

Let’s say I want to layout my page like this:

Label: <inputField>        Label: <inputField>
Label: <inputField>        Label: <inputField>

<-------------------- LINE ------------------>

Label: <inputField>
Label: <inputField>
Label: <inputField>
Label: <inputField> <inputField>

<-------------------- LINE ------------------>

<button> <button> <button> <checkbox>

I would do it using <table> for layouting the form objects and <hr> for the lines.

But I’m not sure if this is a “nice” solution. (I don’t like all the tables beeing generated…)

Shoud I better use <div> elements for this layout?
Or how would you do it?

Answer 1

With a form, you can style the labels and the inputs. You should do it that way.

EDIT

The quick and dirty version. Adjust as necessary.

<div class="labelLeft"><label>left label</label> <input /></div> 
<div class="labelRight"><label>right label</label> <input /></div> 

<br />

<div class="labelLeft"><label>left label</label> <input /></div> 
<div class="labelRight"><label>right label</label> <input /></div>

<br />

<div class="labelLeft"><label>left label</label> <input /></div> 
<div class="labelRight"><label>right label</label> <input /></div> 

<hr />

<label>label</label> <input /><br /><br />
<label>label</label> <input /><br /><br />
<label>label</label> <input /><br /><br />
<label>label</label> <input /> <input />

<hr />

<button></button> <button></button> <button></button> &nbsp;<input type="checkbox" /> 

div.labelLeft{float:left; width:250px;}
div.labelright{float:right; width:250px;}
label{border:1px solid red;}

http://jsfiddle.net/jasongennaro/XzhDd/