AnsweredAssumed Answered

Two column form conflict

Question asked by Sonia Kelly on Jan 3, 2014
Latest reply on Jan 3, 2014 by Sonia Kelly

I'm having a problem creating a two column form, and placing a label above a group of form fields in that two column form. To create the two column form, I used the community resource here:

I then used this resource to add labels above a group of form fields:

For some reason, the second label will not move to the correct position:
"What Can We Help You With?" should appear before "Software Solutions" in the form.

Here is my code:
// Set up landing page

<style type='text/css'>
form.lpeRegForm li.mktField {
float: left;
clear: none;
height: 45px;

form.lpeRegForm ul {

#mktFrmButtons {
clear: both;


// Move error messages

<style type="text/css">
left: 0px !important;
top: 15px !important;

// Add Section Breaks and Labels

<script type="text/javascript" src="/js/public/jquery-latest.min.js"></script>
<script type="text/javascript">
  $jQ = jQuery.noConflict();
$jQ('#FirstName').parents('li').before("<div style='padding-bottom:20px;font-weight:bold;'>Your Information</div>");
    $jQ('#Software_solutions__c').parents('li').before("<div style='padding-bottom:20px;font-weight:bold;'>What Can We Help You With?</div>");

.mktInput input, .mktInput select, .mktInput textarea  {
border-top: 1px solid #D4D2D2 !important;
border-right: 3px solid #D4D2D2 !important;
border-bottom: 3px solid #D4D2D2 !important;
border-left: 1px solid #D4D2D2 !important;
border-radius: 8px !important;
-webkit-border-radius: 8px !important;
-moz-border-radius: 8px !important;
color: #303030 !important;
padding: 7px !important;
margin: 0px !important;
border-top-left-radius: 8px 8px;
border-top-right-radius: 8px 8px;
border-bottom-right-radius: 8px 8px;
border-bottom-left-radius: 8px 8px;

I really don't know where to go from here, but I'm not a javascript expert - thanks in advance for your help!