Bye bye tables… welcome CSS is the mantra of most web developers now. Laying out a design for most of the designers can be a nightmare when coming from the era of table designs.

I have searched and found lots of two column form layouts, but when it comes to long layouts, two column layouts can become quite expensive in terms of screen real estate. To make best use of the available real estate, I looked for a 4 column CSS layout. Not finding any wrote one myself. It is not perfect, but will serve as a good starting point for anyone looking in this direction.

Ok, Lets get started.

The completed form will look like this,

Click Here for a live DEMO

Download complete example and CSS here ->Four Column Tableless CSS Form Layout - Downloaded 1182 times

Its always a good practice to put your content into a list structure so that it will degrade gracefully in older browsers. Let me know if you have any other techniques for this. As of now our CSS looks like this,

  • An outer UL container to have all our form elements intact
  • A “left” class for the form labels
  • A “right” class for the form elements
  • A “clear” class for drawing the imaginary horizontal line after each form element group
ul
{
  list-style: none; //removes the dot before the list
}

.left //style for form labels
{
  width: 200px;
  float: left;
  position:relative;
  padding: 5px;
}

.right //style for form elements
{
 width: 250px;
 float: left;
 position:relative;
 padding: 5px;
}

.clear //marks the end of a div
{
 float: none;
 clear: both;
 height: 0px;
}

Our HTML with layout will look like this,

<ul>
 <li>
 <div>Field 1</div>
 <div><input type="text" id="one" name="one" /></div>
 <div><input type="button" value="Get Information" tabindex="5" accesskey="p" style="position:relative; top: -2px; font-size: 10pt;" id="btnGetEmpInfoByID" name="btnGetEmpInfoByID" onclick="javascript:getEmployeeByID();"></div>
 <div></div>
 </li>
 <li>
 <div>Field 2</div>
 <div><input type="text" id="two" name="two" value="" /></div>
 <div>Field 3</div>
 <div><input type="text" id="three" name="three" value="" /></div>
 <div></div>
 </li>
 <li>
 <div>Field 4</div>
 <div><select name="four" id="four"></select></div>
 <div>Field 5</div>
 <div><select name="five" id="five"></select></div>
 <div></div>
 </li>
</ul>

That’s all. We come to the end of another how-to. Post your comments and we can improvise and improve.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter