Lining up inputs & their labels cleanly
Lines up inputs & their labels cleanly also shows how to do multiple columns of both.
HTML
<form id="cartForm" class="hidden"> <!--overlay">-->
<fieldset id="CartMain">
<legend>WistCart</legend>
<div id="Person" class="gridrow">
<input id="Person_ID" type="hidden" name="Person_ID" >
<div id="personLabels" class="column">
</div>
<div id="personFields" class="column">
<div>
<label for="Email">
Email Address
</label>
<input id="Email" name="Email" type="email" placeholder="Email" autofocus>
</div>
<label for="FirstName">
First Name
</label>
<input id="FirstName" name="FirstName" type=text placeholder="First Name">
<label for="LastName">
Last Name
</label>
<input id="LastName" name="LastName" type="text" placeholder="Last Name" required>
<label for="MiddleName">
Middle Initial
</label>
<input id="MiddleName" name="MiddleName" type="text" placeholder="MiddleName">
</div>
</div>
<div id="Location" column="gridrow">
<div id="locationLabels" class="column">
<!-- <label class="spacer">
</label>
<label class="spacer">
</label>
<label class="spacer">
</label>
<label class="spacer">
</label>
<label class="spacer">
</label>
-->
</div>
<div id="locationFields" class="column">
<label id="Street_AddressLabel" for="Street_Address">
Street Address
</label>
<label...
CSS
/*
Document : basicForm
Created on : Sep 24, 2013, 12:44:40 AM
Author : mer
Description:
Purpose of the stylesheet follows.
*/
/*
Colors to use for wist:
55255F (even darker)
7B4686 (darker than standard purple)
9454A2 (the standard purple)
BC97C4 (a bit lighter)
D9C3DD (even lighter)
FCF9FD (very light)
FEFCFE (extremely light)
FFFEFF (exceedingly light)
*/
/**
a jsfiddle to utilize the different positioning properties to figure out how to position elements most effectively:
http://jsfiddle.net/wjqacd7v/
jsfiddle to show lining up inputs & their labels cleanly:
http://jsfiddle.net/mrummler/pzpznfvp/
http://jsfiddle.net/mrummler/73b6cpe2/ (more complete of the above)
**/
/*tr:nth-child(even) {background: #FFF}
tr:nth-child(odd) {background: #CCC}*/
th
{
background: #F3F0F6;/*D9C3DD*//*#fbcb09;*/
font-weight: bold;
}
/*
root {
background: #ffffff;
color: #111111;
padding: 80px;
display: block;
min-height: 250px;
min-width: 50px;
}
*/
*
{
font-family: Arial,Verdana,sans-serif;
font-size:1em;
}
body
{
/* -size: 1em;*/
background: #FFFFFF;/*#FFFEFF;/*#F1FEFF;*//*#EDF8F9;*//*#E1EFF0;*//*#FBFFFF;*/
display: block;
}
nav
{
/*background: #F1FEFF;*/
}
/* the below helps lineup labels & inputs appropriately*/
label,
textarea,
select,
input
{
/* float: left;*/
display: block;*/
vertical-align:middle;
}
input, textArea, select, datalist
{
box-shadow: 2px 2px 8px #D9C3DD;
border-radius:5px;
}
label
{
float: left;*/
/* padding-top: 5px;*/
/* padding:0px 20px 0px 10px;*/
text-align: left;
vertical-align:middle;
/* width: 30%;/*8em;/*9em;*/
width: 7em;/*9em;*/
padding: 0px 4px 0px 10px;
}
/*[class*=gridrow]
{
float: left;
}
*/
[class*=column]
{
padding: .1% 0 1% 0;
/* float: none;*/
/* float: left;
/* display: flex;*/
overflow:auto;
}
*/
label[class=spacer]
{
padding: 0.42em;
}
/* the above helps lineup labels & inputs...