LESS-CSS Class-Form

class-form.html

<style>
.class-form {
	dl { clear: both; float: left; width: 100%; margin: 0 0 10px; 
		dt, dd { float: left; min-height: 30px; margin: 0; }
		dt { font: 400 12px/22px sans-serif; text-indent: .5%; width: 18%; margin-right: 1.5%; }
		dd { width: 80%; 
			small { display: block; font-size: 11px; color: #888; margin: 3px 0; }
			span[img] { display: block; background: #D5D5D5; width: 64px; height: 64px; overflow: hidden; .border-radius(3px); }
			input[type=text], input[type=email], input[type=password] { text-indent: 1%; width: 99%; padding: 6px 0; border: solid 1px #CCC; border-radius: 3px; }
			input[compact] { text-indent: 2%; width: 31.7%; margin-left: 1%; 
				&:first-child { margin-left: 0; }
			}
		}
	}
}
</style>

<form action="" method="post" class="class-form">
	<dl>
		<dt>Full Name</dt>
		<dd><input type="name" name="" placeholder="Full Name"></dd>
	</dl>
	<dl>
		<dt>Email Address</dt>
		<dd><input type="email" name="" placeholder="Email Address"></dd>
	</dl>
	<dl>
		<dt>Address 1</dt>
		<dd><input type="text" name="" placeholder="Address 1"></dd>
	</dl>
	<dl>
		<dt>Address 2</dt>
		<dd><input type="text" name="" placeholder="Address 2"></dd>
	</dl>
	<dl>
		<dt>City / State / Zip</dt>
		<dd>
			<input compact type="text" name="city" placeholder="City">
			<input compact type="text" name="state" placeholder="State">
			<input compact type="text" name="zip" placeholder="Zip">
		</dd>
	</dl>
	<dl>
		<dt>Password</dt>
		<dd><input type="password" name="" placeholder="Password"></dd>
	</dl>
	<dl>
		<dt>Confirm Password</dt>
		<dd><input type="password" name="" placeholder="Confirm Password"></dd>
	</dl>

	<div class="clear"></div>
	<button class="btn" type="submit">Submit Information</button>
</form>

A simple LESSCSS & HTML code that create basic fluid form layout.