Cesar Olivas

Hello, ive been wanted to share this post for some time now. This is my own technique of changing huge forms build with tables to divs in a consistent, low mantainance way.

I started using this technique some time ago for the necessity of having divs instead of tables, and handling the fields on a better way.

This technique consists of stacking divs on top of each other(Which I will call rows), and inside those divs, inserting divs as necessary(I will call them fields). Inside the fields, we can put our label and textboxes. We will also need a clear div before closing each row. This technique is also depending on the size of textboxes, so you need to consider that when implementing this.

Basically, the html we need is this.

<div class=”row”>
   <div class=”field”>
      <label>Field 1: </label>
      <input type=”text” />
   </div>
   <div class=”field”>
      <label>Field 1: </label>
      <input type=”text” />
   </div>
   <div class=”clear”></div>
</div>
<div class=”row”>
   <div class=”field”>
      <label>Field 1: </label>
      <input type=”text” />
   </div>
   <div class=”field”>
      <label>Field 1: </label>
      <input type=”text” />
   </div>
   <div class=”clear”></div>
</div>

You will need a css like this:

.row

{

width: 100%;/*100% will take the width of the parent container. You can change this to set a fixed width. This width is important to calculate the width of the fields inside the rows.*/

margin-bottom: 15px; /*You can set this to whatever vertical spacing you want between rows*/

height: 150px;/*You can change this or leave this auto to add a height to your row*/

}

.row .field

{

width: auto; /*If you want the fields to expand as needed, leave this auto, if you want them to have a fixed width for aligning purposes, set a width. You will change this if you have more than one field per row. Basically, the width would be totalRowWidth/NumberOfFields- MarginRight*/

margin-right: 20px; /*This margin will add a separation between fields.*/

float: left; /*This will put the field divs on side of each other*/

}

.clear

{

clear: both; /*this will clear the floats of fields.*/

}

This technique also requires that we declare different types of rows in the css. This types of row will be added as you see necessary; for example if you need one row that was only one field you can use the original .row class. This class might or might not have a margin right or a fixed width, which means that the div field will expand as necessary and will not have a margin.

If you need 2 fields in any row and you want them to align to the other rows, you can set a new class that you might name .row-2, so you can later define .field to be of any width you have, and the margin-right will give you the separation necessary to align them. You can repeat this technique for the different types of row you will have.

You might or might not use this technique, but I’ve proved it to be very effective at maintaining and styling forms. Besides, you will not have the necessity to add colums or colspans to tables if you add a field, you just add the field to the row and change the class of the row to the number of fields it will now have, the css will do the rest.

/*Cesar*/