Making My Fields Horizontal Instead of All Vertical

[FONT=Arial]see here: http://www.christiancouriernewspaper.com/blogbase/contactpage.php[/FONT]

[FONT=Arial]What I want is for 7 fields (Name-State) on the Left just how they are[/FONT]
[FONT=Arial]Then I want the remaining fields (Country- the spam question) on the right [/FONT]

[FONT=Arial]I would like to have it so it all fits on one page without having to scroll[/FONT]

[FONT=Arial]any ideas/suggestions?[/FONT]

[FONT=Arial]the .css file is below[/FONT]


[FONT=Arial][FONT=Arial]/*[/FONT]
[FONT=Arial]  ----------------------------------------------------------------[/FONT]
[FONT=Arial]  GBCF-V3 BLUE STYLE SHEET - MIKE CHERIM [HTTP://GREEN-BEAST.COM](http://green-beast.com/)[/FONT]
[FONT=Arial]  ----------------------------------------------------------------[/FONT]
[FONT=Arial]  To use for testing, this stylesheet must be named default.css[/FONT]
[FONT=Arial]*/[/FONT]
[FONT=Arial]/* === form div and elements ======================================= */[/FONT]
[FONT=Arial]#form-div { [/FONT]
[FONT=Arial] font-family : verdana, helvetica, palatino sans, tahoma, arial, sans-serif;[/FONT]
[FONT=Arial] width : 70%;[/FONT]
[FONT=Arial] margin : auto;[/FONT]
[FONT=Arial] color : #FF8C00 ;[/FONT]
[FONT=Arial] line-height : 1.2em;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]#form-div p.form-footer {[/FONT]
[FONT=Arial] margin : -35px 2px 20px 13px;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]#form-div p.form-footer a { [/FONT]
[FONT=Arial] color : #003366; [/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]#form-div p.form-footer a:hover, #form-div p.form-footer a:focus, #form-div p.form-footer a:active { [/FONT]
[FONT=Arial] color : #000; [/FONT]
[FONT=Arial] text-decoration : none; [/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]#form-div p.form-footer a:focus, #form-div p.form-footer a:active { [/FONT]
[FONT=Arial] background-color : #eee; [/FONT]
[FONT=Arial]}[/FONT]
 
[FONT=Arial]/* === form div link styles ======================================== */[/FONT]
[FONT=Arial]#form-div a { [/FONT]
[FONT=Arial] color : #FF6600; [/FONT]
[FONT=Arial]}[/FONT]
 
[FONT=Arial]#form-div a:hover, #form-div a:focus, #form-div a:active { [/FONT]
[FONT=Arial] color : #000; [/FONT]
[FONT=Arial] text-decoration : none; [/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]#form-div a:focus, #form-div a:active { [/FONT]
[FONT=Arial] background-color : #eee; [/FONT]
[FONT=Arial]}[/FONT]
 
[FONT=Arial]/* === success and error message/results box ======================= */[/FONT]
[FONT=Arial]#form-div p.success, #form-div p.error, #form-div p.center { [/FONT]
[FONT=Arial] color : #fff;[/FONT]
[FONT=Arial] /* color : #000; (lite colors option - uncomment to use) */[/FONT]
[FONT=Arial] padding : 1px 4px; [/FONT]
[FONT=Arial] border : 1px solid #000; [/FONT]
[FONT=Arial] background-color : #003366;[/FONT]
[FONT=Arial] /* background-color : #bfccd9; (lite colors option - uncomment to use) */[/FONT]
[FONT=Arial] margin : 10px 3px;[/FONT]
[FONT=Arial] text-align : center;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]#form-div p.error { [/FONT]
[FONT=Arial] background-color : #bb0000; [/FONT]
[FONT=Arial] /* background-color : #edbaba; (lite colors option - uncomment to use) */[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]#form-div p.error a, #form-div p.success a {[/FONT]
[FONT=Arial] color : #ffff7f;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]#form-div p.center {[/FONT]
[FONT=Arial] text-align : center;[/FONT]
[FONT=Arial] background-color : #edbaba;[/FONT]
[FONT=Arial] color : #000;[/FONT]
[FONT=Arial] margin-top : -3px;[/FONT]
[FONT=Arial] padding : 0px 4px; [/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]#form-div p.error a:hover, #form-div p.error a:focus, #form-div p.error a:active, [/FONT]
[FONT=Arial]#form-div p.success a:hover, #form-div p.success a:focus, #form-div p.success a:active {[/FONT]
[FONT=Arial] color : #eee;[/FONT]
[FONT=Arial] background-color : #bb0000; [/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]#form-div p.success a:hover, #form-div p.success a:focus, #form-div p.success a:active {[/FONT]
[FONT=Arial] background-color : #003366; [/FONT]
[FONT=Arial]}[/FONT]
 
[FONT=Arial]/* === structural form elements ==================================== */[/FONT]
[FONT=Arial]form#gbcf-form { }[/FONT]
[FONT=Arial]fieldset.main-set,[/FONT]
[FONT=Arial]fieldset.req-set,[/FONT]
[FONT=Arial]fieldset.opt-set { [/FONT]
[FONT=Arial] border : 1px solid #eee;[/FONT]
[FONT=Arial] padding : 5px;[/FONT]
[FONT=Arial]}[/FONT]
 
[FONT=Arial]/* === textural form elements ====================================== */[/FONT]
[FONT=Arial]#form-div legend { [/FONT]
[FONT=Arial] font-weight : bold;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]#form-div legend span { }[/FONT]
[FONT=Arial]legend.main-legend { [/FONT]
[FONT=Arial] color : #777;[/FONT]
[FONT=Arial] font-size : 100%;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]legend.req-legend,[/FONT]
[FONT=Arial]legend.opt-legend { [/FONT]
[FONT=Arial] color : #777;[/FONT]
[FONT=Arial]font-size : 60%;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]legend.main-legend span { }[/FONT]
[FONT=Arial]legend.main-legend { }[/FONT]
[FONT=Arial]legend.req-legend span { }[/FONT]
[FONT=Arial]legend.req-legend {[/FONT]
[FONT=Arial] margin-left : -2px;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]legend.opt-legend span { }[/FONT]
[FONT=Arial]legend.opt-legend { [/FONT]
[FONT=Arial] margin-left : -2px;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]label.req-label, label.opt-label {[/FONT]
[FONT=Arial] color : #FF6600;[/FONT]
[FONT=Arial]font-size : 60%;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]label.opt-label.check {[/FONT]
[FONT=Arial] float : right;[/FONT]
[FONT=Arial] padding : 0;[/FONT]
[FONT=Arial] margin : 1px 4px;[/FONT]
[FONT=Arial] cursor : pointer;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]label.opt-label.main-label {[/FONT]
[FONT=Arial] margin : 0 2px;[/FONT]
[FONT=Arial] font-weight : bold;[/FONT]
[FONT=Arial] font-size : 75%; [/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]label.opt-label.main-label span {[/FONT]
[FONT=Arial] font-weight : normal;[/FONT]
[FONT=Arial] color : #FF6600;[/FONT]
[FONT=Arial]font-sze : 60%;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]label.opt-label.main-label span.req, label span.req  {[/FONT]
[FONT=Arial] font-weight : bold;[/FONT]
[FONT=Arial] color : #c70000;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]label.req-label.explain {[/FONT]
[FONT=Arial] color : #666;[/FONT]
[FONT=Arial] font-size : .8em;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]label.req-label.explain:hover {[/FONT]
[FONT=Arial] color : #000;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]/* === control and interface form elements ========================= */[/FONT]
[FONT=Arial]/*[/FONT]
[FONT=Arial] note: In this section you will see the hover/focus styles for the [/FONT]
[FONT=Arial] inputs. For example: input:hover, input:focus. You will also see [/FONT]
[FONT=Arial] these names applied as classes: input.hover, input,focus, for [/FONT]
[FONT=Arial] example. This is not done by mistake. Those classes are needed for [/FONT]
[FONT=Arial] the JavaScript focus script (files/focus.js) for IE 7 and older.[/FONT]
[FONT=Arial]*/[/FONT]
[FONT=Arial]input.text-long.address, input.text-long.address:hover, input.text-long.address:focus,[/FONT]
[FONT=Arial]input.text-long.address.hover, input.text-long.address.focus {[/FONT]
[FONT=Arial] border-bottom : 0;[/FONT]
[FONT=Arial] margin-bottom : 0;[/FONT]
[FONT=Arial] padding-bottom : 2px;[/FONT]
[FONT=Arial] border-bottom : 1px dotted #bbb;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]input.text-long.address2, input.text-long.address2:hover, input.text-long.address2:focus,[/FONT]
[FONT=Arial]input.text-long.address2.hover, input.text-long.address2.focus {[/FONT]
[FONT=Arial] border-top : 0;[/FONT]
[FONT=Arial] margin-top : 0;[/FONT]
[FONT=Arial] padding-top : 2px;[/FONT]
[FONT=Arial] border-top : 1px dotted #bbb;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]input.checkbox {[/FONT]
[FONT=Arial] border : 1px solid #999;[/FONT]
[FONT=Arial] width : .9em;[/FONT]
[FONT=Arial] height :.9em;[/FONT]
[FONT=Arial] padding : 0;[/FONT]
[FONT=Arial] margin : 0;[/FONT]
[FONT=Arial] cursor : pointer;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]input.checkbox:hover, input.checkbox.hover,[/FONT]
[FONT=Arial]input.checkbox:focus, input.checkbox.focus {[/FONT]
[FONT=Arial] border : 1px solid #666;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]input.text-short, [/FONT]
[FONT=Arial]input.text-med, [/FONT]
[FONT=Arial]input.text-long,[/FONT]
[FONT=Arial]select.select,[/FONT]
[FONT=Arial]textarea.textarea {[/FONT]
[FONT=Arial] font : 0.6em verdana, helvetica, palatino sans, tahoma, arial, sans-serif;[/FONT]
[FONT=Arial] border : 1px solid #999;[/FONT]
[FONT=Arial] background-color : #fffffe;[/FONT]
[FONT=Arial] cursor : text;[/FONT]
[FONT=Arial] padding : 1px 2px;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]select.select {[/FONT]
[FONT=Arial] padding : 1px 0;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]input.text-short {[/FONT]
[FONT=Arial] width : 75px;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]input.text-med, select.select {[/FONT]
[FONT=Arial] width : 150px;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]input.text-long {[/FONT]
[FONT=Arial] width : 175px;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]textarea.textarea {[/FONT]
[FONT=Arial] width : 220px;[/FONT]
[FONT=Arial] height : 100px;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]select.select, select.select option {[/FONT]
[FONT=Arial] cursor : pointer;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]input.text-short:focus, input.text-short.focus, [/FONT]
[FONT=Arial]input.text-med:focus, input.text-med.focus,[/FONT]
[FONT=Arial]input.text-long:focus, input.text-long.focus,[/FONT]
[FONT=Arial]select.select:focus, input.select.focus,[/FONT]
[FONT=Arial]textarea.textarea:focus, textarea.textarea.focus {[/FONT]
[FONT=Arial] border : 1px solid #666;[/FONT]
[FONT=Arial] background-color : #ffe;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]input.button { [/FONT]
[FONT=Arial] font : 0.9em verdana, helvetica, palatino sans, tahoma, arial, sans-serif;[/FONT]
[FONT=Arial] font-weight : bold;[/FONT]
[FONT=Arial] margin-top : 8px;[/FONT]
[FONT=Arial] padding : 1px 10px;[/FONT]
[FONT=Arial] cursor : pointer;[/FONT]
[FONT=Arial] float : right;[/FONT]
[FONT=Arial] clear : both;[/FONT]
[FONT=Arial] color : #003366;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]input.button:hover, input.button.hover,[/FONT]
[FONT=Arial]input.button:focus, input.button.focus {[/FONT]
[FONT=Arial] color : #333;[/FONT]
[FONT=Arial]}[/FONT]
[FONT=Arial]/* because IE6 sucks - if you have a conditionally served IE6 style sheet add this to it */[/FONT]
[FONT=Arial]* html input.button {[/FONT]
[FONT=Arial] border : 1px solid #666;[/FONT]
[FONT=Arial]}[/FONT]
 
[FONT=Arial]/* EOF - Created by Mike Cherim @ [http://green-beast.com](http://green-beast.com/) =========== */[/FONT]
[/FONT]

[FONT=Arial]thanks ahead of time!!![/FONT]