The OT style is applied to this Get Free Quote form.

It consists of two parts - questions and guidelines. The first part is divided into two columns each per 50% wide. There is radio filed, dropdown field, text area field, file upload field and image verification field. The guidelines are written into a text field and then styled with css. Some of the questions are in one row - a question and an answer area. The one-row style is applicable for short questions with a textbox for reply. Such questions are used for gathering general information, for example, name, company, phone, email.

The two-row rows is - question, row break and then the field for answer. The two-row style is applicable for longer questions with more space for answer. You may use textarea, radio options, or checkbox options. The second row has a left padding, which visually separates questions from answer options.

In both parts the validation advice notion is set to show bellow the answer area, with a slightly decreased font size and in red color.

There is enough space between each questions to show the validation advice notion without overflow any text.

The CSS style is tested in FF3.5, IE6, Opera9.

Here is the CSS:

/* General Layout */

.quote-50 {
    width: 49%;
    float: left;
}
.box {
    clear: left;
    background:#EFEFEF none repeat scroll 0 0;
    border:1px solid #CCCCCC;
    margin-top: 20px;
}
p.guides {
    clear: left;
}

/*------------ Chronoforms CSS ---------------*/

.clear { 
    clear: none;
    height: 0px;
    line-height:0px;
}
.form_item {
    padding: 1px 0px!important;
    position: relative;
    margin:0 8px;
}
.form_item .validation-advice {
    float: left;
    display: inline;
    color: red;
    font-size:    0.9em;
}
.form_item h2 {
    padding: 10px 0;
    border-bottom: 1px solid #AAAAAA;
}
.form_item h3 {
    padding: 20px 0 0;
    margin: 0px;
}
.box .form_item h3 {
    padding: 13px 0 0;
}
.form_element {
    float: none;
    font-size: 1em;
    padding: 3px 0 13px !important;
    margin: 0px !important;
    width: auto;
}
.form_element label {
    width: auto;
    float: none;
    margin: 0px;
}
.form_element select, .form_element input, .onerow .form_element textarea {
    width: 50%;
    font-size: 1em;
}
.form_element textarea {
    width: 73%;
    font-size: 1em;
}
.cf_radiobutton .float_left, .cf_checkbox .float_left {
    float: none;
}
.cf_button input {
    margin: 0 auto;
    background: #135CAE;
    border: 1px solid #333333;
    color: #FFFFFF;
    font-weight: bold;
    cursor: pointer;
    font-size: 1.3em;
    padding: 7px;
}
.cf_button input:hover, .cf_button input:focus {
    background: #fff;
    color: #0B3768;
}

/* Start Captcha CSS */

.cf_captcha span input#chrono_verification {
    margin-top: 10px;
    width: 50%;
}
.cf_captcha .tooltipimg {
    margin-top: 10px;
    vertical-align: top;
}
.cf_captcha img#imgver {
    vertical-align: middle;
}

/* End Captcha CSS */

/* Start One Row elements */

.onerow .form_element label {
    vertical-align: top;
    margin: 0px;
    padding: 0px;
    padding-right: 3%;
    width: 29%;
    float: left;
    line-height: 16px;
}
.onerow .form_element .tooltipimg {
    vertical-align: top;
}
.onerow .cf_dropdown .tooltipimg {
    vertical-align: middle;
}
.onerow .cf_textbox input, .onerow .cf_textarea textarea {
    margin-left: 0px !important;
}

/* End One Row elements */

/* Start margin-left for reply elements */

.cf_radiobutton .float_left input, .cf_checkbox .float_left input, .form_item .cf_textbox input, .form_item .cf_textarea textarea {
    margin-left: 30px;
}

/* End margin-left for reply elements */

#main .chronoform {
    height: 0px;
    text-align: right;
    font-size: 0px;
    line-height: 0px;
}
.cf_textarea .tooltipimg {
    vertical-align: top;
    margin-top: 1px;
}
.radio_label, .check_label {
    cursor: pointer;
}
.cf_label {
    text-decoration: underline;
}
.cf_radiobutton_mb15 {
    margin-bottom: 15px;
}
.LV_invalid, .LV_valid {
    position:absolute;
    left: 0px;
    padding: 0px;
    margin:0;
    text-decoration:underline;
    font-weight: normal;
}
.onerow .LV_invalid, .onerow .LV_valid {
    position: absolute;
    top: 18px;
    left: 32%;
}