Jess McKenzie Jess McKenzie - 12 days ago 10
CSS Question

Best way to structure a two column html form?

What is the best way to align the following?

I want the

.inputTitle
on the left and the
inputInput
on the right with the error inbetween them both.

CSS:

.crud_form{
width:430px;
margin:10px solid;
font-family:Verdana, Geneva, sans-serif;
background:orange;
}
.inputTitle{
float:left;
clear:left;
margin:11px 10px 10px 0;
width:95px;
background:green;
}
.inputRequired{
float:left;
margin:5px;
width:113px;
background:blue;
}
.inputError{
float:left;
margin:10px;
background:red;
}

.crud_form select textarea{
float:left;
clear:both;
}


HTML:

<form action="#" method="post" accept-charset="utf-8" class="crud_form" enctype="multipart/form-data">
<span class="inputTitle">First Name</span><span class="inputInput"><input type="text" name="first_name" value="" id="first_name" /></span><span class="inputError"></span>

<span class="inputTitle">Last Name</span><span class="inputInput"><input type="text" name="last_name" value="" id="last_name" /></span><span class="inputError"></span>

<span class="inputTitle">Address</span><span class="inputInput"><textarea name="address" cols="40" rows="10" id="address" ></textarea></span><span class="inputError"></span>

<span class="inputTitle">Phone</span><span class="inputInput"><input type="text" name="phone" value="" id="phone" /></span><span class="inputError"></span>

<span class="inputTitle">Item</span><span class="inputInput"><select name="item" id="item">
<option value="Caps cost $15"></option>
<option value="Mugs cost $20"></option>
<option value="Childrens T-shirts, sizes 0 to 6">$10</option>
<option value="Ladies (no photo) cost $20"></option>
<option value="Men cost $20"></option>
</select></span>

<span class="inputError"></span>
<span class="inputTitle">Comments</span><span class="inputInput"><textarea name="comments" cols="40" rows="10" id="comments" ></textarea></span><span class="inputError"></span>

<input type="submit" value="Save" />

</form>

Answer

I don't know why everyone is using div's, span's and li's etc. It's simple, look at the example below:

label {
  width: 150px;
  padding-right: 20px;
  display: inline-block;
}
<p>
  <label for="IDofInput">text goes here</label>
  <input type="text" id="IDofInput">
</p>
<p>
  <label for="IDofInput">text goes here</label>
  <input type="text" id="IDofInput">
</p>
<p>
  <label for="IDofInput">text goes here</label>
  <input type="text" id="IDofInput">
</p>