Using CSS for Creating Two-column Layout

A close research on web design patterns show that accessibility is an aspect that is most underutilized in a good web page layout. So making accessible forms in web page is the best way to treat this problem. And when you create accessible forms, use CSS layout to create two-column layout forms without using tables, to save space and time. Although majority use block-level floats and margins to position form elements on the page, but the best accessible form can be created using IE5.X Mac as well as Firefox 1.07 Win/Mac, Opera, Camino and Safari 1.07 Mac.

How to build a CSS-based Form?

One of the best ways to build CSS-based form is to decode XHTML to bare structural elements, and then use CSS to create as much style and layout as possible using few embedded classes or IDs. Semantic elements provided by W3C in (X)HTML specifications, namely FIELDSET and LABEL, help in imparting logical order to FORMs. While FIELDSET groups’ like-minded form input fields, LABEL for links field labels with input fields through the ID attribute to make them highly accessible and of style.

To understand the difference created between table-based contact forms and CSS-based forms.

Table-based Contact Forms

Since tables use columns and rows to align labels and input fields, the codes would format the following layout:

Table based layouts lowers the content to markup ratio and reduces SEO speed and rankings. So there is a fortunate way - CSS Layout.

<form action="http://www.example.com/submit.cgi" method="post" name="f">
    <fieldset>
        <legend>Personal Information</legend>>
            <label for="firstname" accesskey="f">First name: </label>
                <input type="text" id="firstname" name="firstname" value="" tabindex="1">
            <label for="lastname" accesskey="l">Last name: </label>
                <input type="text" id="lastname" name="lastname" tabindex="2">
            <label for="email" accesskey="e">Email: </label>
                <input type="text" id="email" name="email" tabindex="3">
    </fieldset>
    <fieldset>
        <legend>Comments</legend>
            <label for="comments" accesskey="c">Your comments: </label>
                <textarea id="comments" rows="3" cols="20" name="comments"></textarea>
                <input type="submit" value="Submit" tabindex="4"> <input type="Reset" tabindex="5">
    </fieldset>
</form>

Set Form Width

Now let us set a width for the forms and style of the field sets. Since field sets are not rendered identical by different browsers, so backgrounds can overlap, and tend to take up the entire space of the screen on Internet Explorer. It is feasible to set the width using the form element:

form { /* set width in form, not fieldset (still takes up more room w/fieldset width */
    font:100% verdana,arial,sans-serif;
    margin: 0;
    padding: 0;
    min-width: 500px;
    max-width: 600px;
    width: 560px;
}

form fieldset { / * clear: both; note that this clear causes inputs to break to left in ie5.x mac, commented out */
    border-color: #000;
    border-width: 1px;
    border-style: solid;
    padding: 10px;        /* padding in fieldset support spotty in IE */
    margin: 0;
}

Complement layout with CSS Float

The main key towards successful lying of two-column form is to float the label element.

For example,

form label {
    display: block;  /* block float the labels to left column, set a width */
    float: left;
    width: 150px;
    padding: 0;
    margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
    text-align: right;
}

This code above will create a two-column layout using input elements and label.

Popularity: 50% [?]

Categories: CSS Forms, CSS Layouts, Posted on January 10, 2008 by Choppr | Login