After initially failing to find an easy, efficient, and cross-browser compatible way of writing CSS for complex forms, I came across a layout foundation called YUI Grids CSS at the Yahoo! Development Network. I would highly recommend using the YUI framework for page layout, since it covers many scenarios including cross-browser compliance. However, if you are going to be doing a complex form layout with dozens of layout cells, the performance is slower than with using a traditional table. In my informal tests, I found load times to be 20~30% slower when using YUI than a simple table. You can see an example of the form I used in my previous blog post labeled Using CSS - Complex Forms Without Tables? Anyone? Anyone?. Ultimately, I will be using these concepts to create a form generation tool that will create forms on the fly with all the general event handling.
Fortunately, I was able to adopt some of the ideas within the YUI CSS framework and simplify it for form layout developments and make the DIV and CSS based layout perform 25% better. I created examples of forms that include up to 10 columns. The container DIV will always have the class divContainer and the items inside will always have a class called divItem[ColumnNumber]. The following example will have content divided into 3 equal parts.
<div class="divContainer">
<div class="divItem3">Column 1 Content</div>
<div class="divItem3">Column 2 Content</div>
<div class="divItem3">Column 3 Content</div>
</div>
You can also mix and match assuming the item fractions add up properly. (For example: 1/3 + 1/3 + 1/6 + 1/6 = 1)
<div class="divContainer">
<div class="divItem3">Column 1 Content</div>
<div class="divItem3">Column 2 Content</div>
<div class="divItem6">Column 3 Content</div>
<div class="divItem6">Column 4 Content</div>
</div>
You can also add your own custom css based on existing ones. In this example, I wanted to tweak the 4 column layout so that the first two columns were a bit different. Since the original two column widths would have added up to 48%, I just had to make sure they were calculated appropriately.
.divItem4
{
float: left;
width: 24%;
margin-left: 1%;
}
.divItem4Custom1
{
float: left;
width: 9%;
margin-left: 1%;
}
.divItem4Custom2
{
float: left;
width: 35%;
margin-left: 1%;
}
<div class="divContainer">
<div class="divItem4Custom1">Column 1 Custom Content</div>
<div class="divItem4Custom2">Column 2 Custom Content</div>
<div class="divItem4">Column 3 Content</div>
<div class="divItem4">Column 4 Content</div>
</div>
I have included the code for the table based and CSS based and correlating performance results below. As I mentioned earlier, the columns are based on equal sizes, so you can tweak these to make them variable. Also note that if you change the margins are padding, the width will need to be tweaked. I have set the left margin to 1px by default.
As far as centering is concerned, IE doesn't recognize auto margins, so you have to make sure that the body has the text-align set to center and container DIV's to have text-align set to left. All container DIV's also need to include the pseudo element "after" which allows you to include content after the closing tag.
Performance Results
The following tests were performed using Google Chrome's Javascript Console (Ctrl+Shift+J) which allows you to see the load time in milliseconds. I loaded each page 10 times, removed the highest outlier, and then got the average. As you can see below, the CSS Load Time was 25.5814% faster. You can see the full code I used below.
| DIV CSS Load Time (ms) | Table Load Time (ms) |
| 32 | 43 |
| 37 | |
| 43 | 43 |
| 55 | |
| 32 | 41 |
| 31 | 55 |
| 40 | 36 |
| 32 | 42 |
| 48 | 36 |
| 32 | 40 |
| Average: 36.33333 | Average: 43.44444 |
Code
Compatible Browsers: Microsoft IE: 7.0.5730.13CO / Google Chrome: 1.0.154.36 / Firefox 3.0.1
DIV Based CSS HTML:
<html>
<head>
<style type="text/css">
body
{
text-align: center;
}
.divContainer
{
border-left-style: solid;
border-left-width: 1px;
border-left-color: black;
border-right-style: solid;
border-right-width: 1px;
border-right-color: black;
border-top-style: solid;
border-top-width: 0px;
border-top-color: black;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: black;
width: 950px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.divContainerFirst
{
border-left-style: solid;
border-left-width: 1px;
border-left-color: black;
border-right-style: solid;
border-right-width: 1px;
border-right-color: black;
border-top-style: solid;
border-top-width: 1px;
border-top-color: black;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: black;
width: 950px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.divContainer:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.divContainerFirst:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.divItem1
{
float: left;
width: 99%; /*Total: 99%*/
margin-left: 1%;
}
.divItem2
{
float: left;
width: 48%; /*Total: 96%*/
margin-left: 1%;
}
.divItem3
{
float: left;
width: 32%; /*Total: 96%*/
margin-left: 1%;
}
.divItem4
{
float: left;
width: 24%; /*Total: 96%*/
margin-left: 1%;
}
.divItem5
{
float: left;
width: 19%; /*Total: 95%*/
margin-left: 1%;
}
.divItem6
{
float: left;
width: 15.5%; /*Total: 93%*/
margin-left: 1%;
}
.divItem7
{
float: left;
width: 13.25%; /*Total: 92.75%*/
margin-left: 1%;
}
.divItem8
{
float: left;
width: 11.4%; /*Total: 91.2%*/
margin-left: 1%;
}
.divItem9
{
float: left;
width: 10.0%; /*Total: 90%*/
margin-left: 1%;
}
.divItem10
{
float: left;
width: 8.9%; /*Total: 89%*/
margin-left: 1%;
}
</style>
</head>
<body> <div class="divContainerFirst">
<div class="divItem1">
1 Column: Imagination is more important than knowledge. Albert Einstein</div>
</div>
<div class="divContainer">
<div class="divItem2">
2 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem2">
2 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
</div>
<div class="divContainer">
<div class="divItem3">
3 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem3">
3 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem3">
3 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
</div>
<div class="divContainer">
<div class="divItem4">
4 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem4">
4 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem4">
4 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem4">
4 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
</div>
<div class="divContainer">
<div class="divItem5">
5 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem5">
5 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem5">
5 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem5">
5 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem5">
5 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
</div>
<div class="divContainer">
<div class="divItem6">
6 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem6">
6 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem6">
6 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem6">
6 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem6">
6 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem6">
6 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
</div>
<div class="divContainer">
<div class="divItem7">
7 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem7">
7 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem7">
7 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem7">
7 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem7">
7 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem7">
7 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem7">
7 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
</div>
<div class="divContainer">
<div class="divItem8">
8 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem8">
8 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem8">
8 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem8">
8 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem8">
8 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem8">
8 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem8">
8 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem8">
8 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
</div>
<div class="divContainer">
<div class="divItem9">
9 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem9">
9 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem9">
9 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem9">
9 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem9">
9 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem9">
9 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem9">
9 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem9">
9 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem9">
9 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
</div>
<div class="divContainer">
<div class="divItem10">
10 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem10">
10 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem10">
10 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem10">
10 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem10">
10 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem10">
10 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem10">
10 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem10">
10 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem10">
10 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
<div class="divItem10">
10 Columns: Imagination is more important than knowledge. Albert Einstein
</div>
</body>
</html>
Table Based HTML:
<html>
<head>
<style type="text/css">
body
{
text-align: center;
}
.divContainer
{
border-left-style: solid;
border-left-width: 1px;
border-left-color: black;
border-right-style: solid;
border-right-width: 1px;
border-right-color: black;
border-top-style: solid;
border-top-width: 0px;
border-top-color: black;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: black;
width: 950px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.divContainerFirst
{
border-left-style: solid;
border-left-width: 1px;
border-left-color: black;
border-right-style: solid;
border-right-width: 1px;
border-right-color: black;
border-top-style: solid;
border-top-width: 1px;
border-top-color: black;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: black;
width: 950px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.divContainer:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.divContainerFirst:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
</head><body>
<table class="divContainerFirst">
<tr>
<td>
1 Column: Imagination is more important than intelligence. Albert Einstein.
</td>
</tr>
</table>
<table class="divContainer">
<tr>
<td>
2 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
2 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
</tr>
</table>
<table class="divContainer">
<tr>
<td>
3 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
3 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
3 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
</tr>
</table>
<table class="divContainer">
<tr>
<td>
4 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
4 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
4 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
4 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
</tr>
</table>
<table class="divContainer">
<tr>
<td>
5 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
5 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
5 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
5 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
5 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
</tr>
</table>
<table class="divContainer">
<tr>
<td>
6 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
6 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
6 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
6 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
6 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
6 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
</tr>
</table>
<table class="divContainer">
<tr>
<td>
7 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
7 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
7 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
7 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
7 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
7 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
7 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
</tr>
</table>
<table class="divContainer">
<tr>
<td>
8 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
8 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
8 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
8 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
8 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
8 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
8 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
8 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
</tr>
</table>
<table class="divContainer">
<tr>
<td>
9 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
9 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
9 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
9 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
9 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
9 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
9 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
9 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
9 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
</tr>
</table>
<table class="divContainer">
<tr>
<td>
10 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
10 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
10 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
10 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
10 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
10 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
10 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
10 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
10 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
<td>
10 Columns: Imagination is more important than intelligence. Albert Einstein.
</td>
</tr>
</table>
</body></html>
