CSS Customizable Multi-Column form

I need my current single column CSS form to be customizable to multi-columns. Very simple for one who is proficient in CSS. I need one of these single column forms to be customized into a multi-column form, then I need to be taught how this is accomplished. I have MANY of these single column CSS forms that must be customized. I am attaching the code for one of these single-column CSS forms, just view the form in any html editor, you will see the single column. Again, I need this single-column CSS form altered / customized into a Multi-column CSS form. ## Deliverables Here is the CSS single-column form code in need made customizable. <!-- AWeber Web Form Generator 3.0 --> <style type="text/css"> #af-form-1514866027 .af-body .af-textWrap, #af-form-1514866027 .af-body .af-selectWrap{width:70%;display:block;float:right;} #af-form-1514866027 .af-body [login to view URL], #af-form-1514866027 .af-body textarea{background-color:#FFFFFF;border-color:#E1E1ED;border-width:1px;border-style:inset;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:12px;font-family:Verdana, sans-serif;} #af-form-1514866027 .af-body [login to view URL]:focus, #af-form-1514866027 .af-body textarea:focus{background-color:#FFFFFF;border-color:#030303;border-width:1px;border-style:none;} #af-form-1514866027 .af-body [login to view URL]{display:block;float:left;width:25%;text-align:right;color:#2A2AE8;text-decoration:none;font-style:normal;font-weight:normal;font-size:12px;font-family:Verdana, sans-serif;} #af-form-1514866027 .af-body{padding-bottom:15px;padding-top:15px;background-repeat:no-repeat;background-position:left;background-image:none;color:#000000;font-size:11px;font-family:Verdana, sans-serif;} #af-form-1514866027 .af-quirksMode{padding-right:15px;padding-left:15px;} #af-form-1514866027 .af-standards .af-element{padding-right:15px;padding-left:15px;} #af-form-1514866027 .buttonContainer [login to view URL]{background-image:url("[login to view URL]");background-position:top left;background-repeat:repeat-x;background-color:#bdbdbf;border:1px solid #bdbdbf;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:14px;font-family:Verdana, sans-serif;} #af-form-1514866027 .buttonContainer [login to view URL]{width:auto;} #af-form-1514866027 .buttonContainer{text-align:center;} #af-form-1514866027 button,#af-form-1514866027 input,#af-form-1514866027 submit,#af-form-1514866027 textarea,#af-form-1514866027 select,#af-form-1514866027 label,#af-form-1514866027 optgroup,#af-form-1514866027 option{float:none;position:static;margin:0;} #af-form-1514866027 div{margin:0;} #af-form-1514866027 form,#af-form-1514866027 textarea,.af-form-wrapper,.af-form-close-button,#af-form-1514866027 img{float:none;color:inherit;position:static;background-color:none;border:none;margin:0;padding:0;} #af-form-1514866027 input,#af-form-1514866027 button,#af-form-1514866027 textarea,#af-form-1514866027 select{font-size:100%;} #af-form-1514866027 select,#af-form-1514866027 label,#af-form-1514866027 optgroup,#af-form-1514866027 option{padding:0;} #af-form-1514866027,#af-form-1514866027 .quirksMode{width:310px;} #af-form-1514866027.af-quirksMode{overflow-x:hidden;} #af-form-1514866027{background-color:transparent;border-color:#F046F0;border-width:1px;border-style:none;} #af-form-1514866027{overflow:auto;} .af-body .af-textWrap{text-align:left;} .af-body [login to view URL]{border:none!important;} .af-body [login to view URL],.af-body [login to view URL],.af-form .af-element [login to view URL]{float:none!important;} .af-body [login to view URL]{width:100%;float:none;padding:2px!important;} .af-body.af-standards [login to view URL]{padding:4px 12px;} .af-clear{clear:both;} .af-element label{text-align:left;display:block;float:left;} .af-element{padding:5px 0;} .af-form-wrapper{text-indent:0;} .af-form{text-align:left;margin:auto;} .af-quirksMode .af-element{padding-left:0!important;padding-right:0!important;} .lastNameContainer{margin-top:10px;} .lbl-right .af-element label{text-align:right;} body { } </style> <form method="post" class="af-form-wrapper" action="[login to view URL]" target="_new" > <div style="display: none;"> <input type="hidden" name="meta_web_form_id" value="1514866027" /> <input type="hidden" name="meta_split_id" value="" /> <input type="hidden" name="listname" value="stlforeclosure" /> <input type="hidden" name="redirect" value="[login to view URL]" id="redirect_30a84e979d125bfbdcb6922598c48110" /> <input type="hidden" name="meta_redirect_onlist" value="[login to view URL]" /> <input type="hidden" name="meta_adtracking" value="stlforeclosure" /> <input type="hidden" name="meta_message" value="1" /> <input type="hidden" name="meta_required" value="name (awf_first),name (awf_last),custom City,custom State,custom Zip,email,custom Cell Phone,custom Reason for Selling,custom Estimated Value,custom Ask Price,custom Existing Loan Amount" /> <input type="hidden" name="meta_forward_vars" value="" /> <input type="hidden" name="meta_tooltip" value="custom State||Pick a state" /> </div> <div id="af-form-1514866027" class="af-form"><div id="af-body-1514866027" class="af-body af-standards"> <div class="af-element"> <label class="previewLabel" for="awf_field-4934853-first">First Name:</label> <div class="af-textWrap"> <input id="awf_field-4934853-first" type="text" class="text" name="name (awf_first)" value="" /> </div> <div class="af-clear"></div> </div> <div class="af-element"> <label class="previewLabel" for="awf_field-4934853-last">Last Name:</label> <div class="af-textWrap"> <input id="awf_field-4934853-last" class="text" type="text" name="name (awf_last)" value="" /> </div> <div class="af-clear"></div></div> <div class="af-element"> <label class="previewLabel" for="awf_field-4934854">Address:</label> <div class="af-textWrap"><input type="text" id="awf_field-4934854" class="text" name="custom Address" value='' /></div> <div class="af-clear"></div></div><div class="af-element"> <label class="previewLabel" for="awf_field-4934855">City:</label> <div class="af-textWrap"><input type="text" id="awf_field-4934855" class="text" name="custom City" value='' /></div> <div class="af-clear"></div></div><div class="af-element"> <label class="previewLabel" for="awf_field-4934856">State:</label> <div class="af-selectWrap"><select id="awf_field-4934856" name="custom State"> <option selected="selected" class="multiChoice" value="preSelectedHeadingSelected">Pick a state</option><option class="multiChoice" value="MO">MO</option> <option class="multiChoice" value="IL">IL</option> </select> </div><input type="hidden" name="meta_preselected_awf_field-4934856" value=""/><div class="af-clear"></div></div><div class="af-element"> <label class="previewLabel" for="awf_field-4934857">Zip:</label> <div class="af-textWrap"><input type="text" id="awf_field-4934857" class="text" name="custom Zip" value='' /></div> <div class="af-clear"></div></div><div class="af-element"> <label class="previewLabel" for="awf_field-4934858">Email: </label> <div class="af-textWrap"><input class="text" id="awf_field-4934858" type="text" name="email" value="" /> </div><div class="af-clear"></div> </div> <div class="af-element"> <label class="previewLabel" for="awf_field-4934859">Cell Phone:</label> <div class="af-textWrap"><input type="text" id="awf_field-4934859" class="text" name="custom Cell Phone" value='' /></div> <div class="af-clear"></div></div><div class="af-element"> <label class="previewLabel" for="awf_field-4934860">Home Phone:</label> <div class="af-textWrap"><input type="text" id="awf_field-4934860" class="text" name="custom Home Phone" value='' /></div> <div class="af-clear"></div></div><div class="af-element"> <label class="previewLabel" for="awf_field-4934861">Property Type:</label> <div class="af-selectWrap"><select id="awf_field-4934861" name="custom Property Type"> <option class="multiChoice" value="Single Family Ranch">Single Family Ranch</option> <option class="multiChoice" value="Single Family 2-Story">Single Family 2-Story</option> <option class="multiChoice" value="Single Family Split">Single Family Split</option> <option class="multiChoice" value="Multi-Family 2-Unit">Multi-Family 2-Unit</option> <option class="multiChoice" value="Multi-Family 4-Unit">Multi-Family 4-Unit</option> <option class="multiChoice" value="Condo">Condo</option> <option class="multiChoice" value="Town Home">Town Home</option> <option class="multiChoice" value="Appartment">Appartment</option> </select> </div><input type="hidden" name="meta_preselected_awf_field-4934861" value=""/><div class="af-clear"></div></div><div class="af-element"> <label class="previewLabel" for="awf_field-4934862">Property Condition:</label> <div class="af-selectWrap"><select id="awf_field-4934862" name="custom Property Condition"> <option class="multiChoice" value="Excellent">Excellent</option> <option class="multiChoice" value="Good">Good</option> <option class="multiChoice" value="Fair">Fair</option> <option class="multiChoice" value="Needs Repair">Needs Repair</option> </select> </div><input type="hidden" name="meta_preselected_awf_field-4934862" value=""/><div class="af-clear"></div></div><div class="af-element"> <label class="previewLabel" for="awf_field-4934863">Reason for Selling:</label> <div class="af-selectWrap"><select id="awf_field-4934863" name="custom Reason for Selling"> <option class="multiChoice" value="Upgrading">Upgrading</option> <option class="multiChoice" value="Downgrading">Downgrading</option> <option class="multiChoice" value="Bankruptcy">Bankruptcy</option> <option class="multiChoice" value="Divorce">Divorce</option> <option class="multiChoice" value="Financial Problems">Financial Problems</option> <option class="multiChoice" value="Illness">Illness</option> <option class="multiChoice" value="Inherited">Inherited</option> <option class="multiChoice" value="Pending Foreclosure">Pending Foreclosure</option> <option class="multiChoice" value="Relocating">Relocating</option> <option class="multiChoice" value="Other">Other</option> </select> </div><input type="hidden" name="meta_preselected_awf_field-4934863" value=""/><div class="af-clear"></div></div><div class="af-element"> <label class="previewLabel" for="awf_field-4934864">Bedrooms:</label> <div class="af-selectWrap"><select id="awf_field-4934864" name="custom Bedrooms"> <option class="multiChoice" value="1">1</option> <option class="multiChoice" value="2">2</option> <option class="multiChoice" value="3">3</option> <option class="multiChoice" value="4 ">4 </option> </select> </div><input type="hidden" name="meta_preselected_awf_field-4934864" value=""/><div class="af-clear"></div></div><div class="af-element"> <label class="previewLabel" for="awf_field-4934865">Bathrooms:</label> <div class="af-selectWrap"><select id="awf_field-4934865" name="custom Bathrooms"> <option class="multiChoice" value="1">1</option> <option class="multiChoice" value="1.5">1.5</option> <option class="multiChoice" value="2">2</option> <option class="multiChoice" value="2.5">2.5</option> <option class="multiChoice" value="3 ">3 </option> </select> </div><input type="hidden" name="meta_preselected_awf_field-4934865" value=""/><div class="af-clear"></div></div><div class="af-element"> <label class="previewLabel" for="awf_field-4934866">Estimated Value:</label> <div class="af-textWrap"><input type="text" id="awf_field-4934866" class="text" name="custom Estimated Value" value='' /></div> <div class="af-clear"></div></div><div class="af-element"> <label class="previewLabel" for="awf_field-4934867">Ask Price:</label> <div class="af-textWrap"><input type="text" id="awf_field-4934867" class="text" name="custom Ask Price" value='' /></div> <div class="af-clear"></div></div><div class="af-element"> <label class="previewLabel" for="awf_field-4934868">Existing Loan Amount:</label> <div class="af-textWrap"><input type="text" id="awf_field-4934868" class="text" name="custom Existing Loan Amount" value='' /></div> <div class="af-clear"></div></div><div class="af-element"> <label class="previewLabel" for="awf_field-4934869">Comments:</label> <div class="af-textWrap"><input type="text" id="awf_field-4934869" class="text" name="custom Comments" value='' /></div> <div class="af-clear"></div></div><div class="af-element buttonContainer"> <input name="submit" class="submit" type="submit" value="Submit"/> <div class="af-clear"></div> </div> </div> </div> <div style="display: none;"><img src="[login to view URL]" alt="" /></div> </form> <script type="text/javascript"> <!-- (function() { var IE = /*@cc_on!@*/false; if (!IE) { return; } if ([login to view URL] && [login to view URL] == 'BackCompat') { if ([login to view URL]("af-form-1514866027")) { [login to view URL]("af-form-1514866027").className = 'af-form af-quirksMode'; } if ([login to view URL]("af-body-1514866027")) { [login to view URL]("af-body-1514866027").className = "af-body inline af-quirksMode"; } if ([login to view URL]("af-header-1514866027")) { [login to view URL]("af-header-1514866027").className = "af-header af-quirksMode"; } if ([login to view URL]("af-footer-1514866027")) { [login to view URL]("af-footer-1514866027").className = "af-footer af-quirksMode"; } } })(); --> </script> <!-- /AWeber Web Form Generator 3.0 -->