Align form elements using CSS (part I)

We traditionally use table for aligning form elements. Some days ago I saw an example of aligning form elements using css. I forgot the link from where I got this unconventional idea. But the code was somewhat like the following:

<<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body{
font: bold 11px/18px Arial, Helvetica, sans-serif
}
#title {
font: bold 11px/18px Arial, Helvetica, sans-serif; text-transform: uppercase; width: 330px; color: #5a698b; padding-top: 10px; padding-bottom:10px; letter-spacing: 2px; height: 26px; text-align: center
}
form {
width: 400px; text-align:center; border: 1px solid #5a698b
}
.col1 {
float: left; margin: 0px 2px 0px 0px; width: 135px; height: 31px; text-align: right
}
.col2 {
display: block; float: left; margin: 0px; width: 195px; height: 31px
}
div.row {
clear: both; width: 335px
}
.submit {
clear: both; width: 330px; padding-top: 5px; padding-bottom: 5px; height: 29px
}
.input {
padding-right: 1px; padding-left: 1px; padding-bottom: 1px; margin: 4px 0px 5px 8px; font: 11px/14px Arial, Helvetica, sans-serif; color: #5a698b; padding-top: 1px
}
.textarea {
margin: 4px 0px 5px 8px; font: 11px/14px Arial, Helvetica, sans-serif
}
-->
</style>
</head>
<body>
<form action="form_script.php" method="post">
<div id="title">Form</div>
<div class="row"><label class="col1">Name: </label>
<span class="col2"><input class="input" id="name"></span> </div>
<div class="row"><label class="col1">Address: </label>
<span class="col2"><input class="input" id="address"></span></div>
<div class="row"><label class="col1">Email: </label>
<span class="col2"><input class="input" id="email"></span> </div>
<div class="row"><label class="col1">Date of Birth: </label>
<span class="col2"><input class="input" id="dob"></span> </div>
<br />
<div class="submit" align="center"><input type="submit" border="0"> </div>
</form>
</body>
</html>

Isn’t it interesting?

Possibly related posts: (automatically generated)

About this entry

You’re currently reading “Align form elements using CSS (part I),” an entry on anupom.toString( );

Published:
August 24, 2006 / 2:50 am
Category:
HTML/CSS
Tags: