HTML Layout with DIV Tags Instead of Tables

Written by John DeVight on 2011-May-11

Overview

Many developers use html tables to layout their pages. However, there is a trend towards using divs instead of html tables. Here are some simple examples to how to accomplish this. All examples have been tested in IE 7, IE 8, Firefox 3.6, Chrome 11 and Opera 9.8.

CSS Styles

Create the following styles in your stylesheet:

div.tableRow
{
    height: 22px;
    margin: 0 0 10px 0;
}

div.tableColumn
{
    float: left;
}

div.tableColumnSeperator
{
    float: left;
    width: 20px;
}

label.fieldLabel
{
    display: block;
    float: left;
    width: 150px;
    padding: 0;
    margin: 5px 0 0;
    text-align: left;
}

fieldset.horizontalStack
{
    display: inline-block;
    float: left;
    margin-right: 10px;
}

Simple Layout

Here is an example of a simple layout with 2 rows. Each row contains a label and an input text field:

<div class="tableRow">
    <div class="tableColumn">
        <label class="fieldLabel" for="Document_DocumentNumber">Document Number:</label>
    </div>
    <div class="tableColumnSeperator">&nbsp;</div>
    <div class="tableColumn">
        <input id="Document_DocumentNumber" type="text" name="Document.DocumentNumber">
    </div>
</div>

<div class="tableRow">
    <div class="tableColumn">
        <label class="fieldLabel" for="DocumentMod_ModificationNumber">Modification Number:</label>
    </div>
    <div class="tableColumnSeperator">&nbsp;</div>
    <div class="tableColumn">
        <input id="DocumentMod_ModificationNumber" type="text" name="DocumentMod.ModificationNumber">
    </div>
</div>

Side by Side Fieldsets

Here is an example of having 2 fieldsets appear side by side. Each fieldset has a width of 50% of the page and contains a label and an input text field:

<fieldset class="horizontalStack" style="width:50%"><legend>Left Fieldset</legend>
    <div class="tableRow">
        <div class="tableColumn">
            <label class="fieldLabel" for="Document_DocumentNumber">Document Number:</label>
        </div>
        <div class="tableColumnSeperator">&nbsp;</div>
        <div class="tableColumn">
            <input id="Document_DocumentNumber" type="text" name="Document.DocumentNumber">
        </div>
    </div>
</fieldset>

<fieldset><legend>Right Fieldset</legend>
    <div class="tableRow">
        <div class="tableColumn">
            <label class="fieldLabel" for="DocumentMod_ModificationNumber">Modification Number:</label>
        </div>
        <div class="tableColumnSeperator">&nbsp;</div>
        <div class="tableColumn">
            <input id="DocumentMod_ModificationNumber" type="text" name="DocumentMod.ModificationNumber">
        </div>
    </div>
</fieldset>

Support ASP.NET Wiki

If you like this page, click on the "Share on" links in the wikidot toolbar at the top of the page to share it with your friends.

Comments