title: Pardot Form: Two Column Layout for Radio/Checkboxes
body: <p><strong>Edit:</strong>
  First, thanks for the attempts to help, I now realize my question was phrased incorrectly.</p>
  
  <p>What I am looking to accomplish is to have the checkbox's sit in a two-column layout. Not have the Radio and Check box sections float next to each other, but rather have the check box choices sit in two column display, similar to this: <a href="http://www.clearcom.com/support/software-update-form" rel="nofollow noreferrer">http://www.clearcom.com/support/software-update-form</a> </p>
  
  <p>The check boxes are in a two column layout</p>
  
  <p>Here is the real problem: I cannot change the code of the HTML at all, I have no control over this because it is a Pardot form I am editing, and am told I have to control the elements using just CSS. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#pardot-form {
    max-width: 500px;
    width: 400px;
    padding: 10px 20px;
    background: #00AEC7;
    margin: 10px auto;
    border-radius: 8px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  }
  
  form.form input.text,
  form.form textarea.standard,
  form.form input.date {
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    font-size: 15px;
    color: #000000;
    margin: 0;
    outline: 0;
    padding: 7px;
    width: 90%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
    box-shadow: 0 1px 0 rgha(0, 0, 0, 0.03) inset;
    margin-bottom: 5px;
  }
  
  input.radio {
    background: #FF0004 !important;
  }
  
  form.form select {
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    font-size: 15px;
    color: #000000;
    margin: 0;
    outline: 0;
    padding: 7px;
    width: 90%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
    box-shadow: 0 1px 0 rgha(0, 0, 0, 0.03) inset;
    margin-bottom: 5px;
  }
  
  form.form input.text:focus,
  form.form textarea.standard:focus,
  form.form input.date:focus,
  form.form select:focus {
    background: #ffffff;
    -moz-box-shadow: 0 0 8px #19478C;
    -webkit-box-shadow: 0 0 8px #19478C;
    box-shadow: 0 0 8px #19478C;
    border: 1px solid #19478C;
  }
  
  form.form p label {
    font-size: 18px;
    color: #ffffff !important;
    font-weight: bold;
    padding-top: 0px;
    padding-bottom: 5px;
    font-family: Helvetica, Arial, sans-serif;
    float: none;
    text-align: left;
    width: 75%;
  }
  
  .interest {
    width: 90% !important;
    height: 100px !important;
  }
  
  form.form p.required label,
  form.form span.required label {}
  
  form.form p.required label.field-label:after {
    content: "*";
    color: #FF0004;
  }
  
  form.form p.submit {
    margin-left: 5px;
  }
  
  form.form p.no-label {
    margin-left: 50px;
  }
  
  form.form p span.description {
    margin-left: 0px;
  }
  
  
  /* SUBMIT BUTTON --------------------*/
  
  form.form p.submit input {
    position: relative;
    display: block;
    padding: 10px 15px 12px 15px;
    border-radius: 11px;
    color: #ffffff;
    margin: 0 auto;
    background: #19478C;
    font-size: 18px;
    text-align: center;
    font-style: bold;
    width: 70%;
    border: 1px solid #3582F4;
    border-width: 1px 1px 5px;
    margin-bottom: 10px;
  }
  
  form.form p.submit input:hover {
    background: #0054D4;
  }
  
  form.form p.submit {
    margin-top: 0px;
    margin-bottom: 0px;
  }
  
  
  /* SUBMIT BUTTON END -----------*/
  
  .pd-radio,
  .pd-checkbox {
    float: left;
    width: 98%
  }
  
  .value .inline {
    width: 20%;
    display: block;
    clear: right;
  }
  
  .value {
    padding-left: 5px;
    width: 98%;
    display: block;
    clear: right;
  }
  
  .inline {
    width: 50%;
    display: inline;
    clear: right;
  }
  
  .value input[type=radio] {
    float: left;
    display: inline;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form action="http://www.website.com" class="form" id="pardot-form"&gt;
    &lt;p class="form-field  first_name pd-text required    "&gt;
      &lt;label class="field-label"&gt;First &lt;/label&gt;
      &lt;input type="text" value="" class="text" size="30" maxlength="40" onchange="" /&gt;
    &lt;/p&gt;
    &lt;div style="display:none"&gt;&lt;/div&gt;
    &lt;p class="form-field  last_name pd-text required    "&gt;
      &lt;label class="field-label"&gt;Last &lt;/label&gt;
      &lt;input type="text" value="" class="text" size="30" maxlength="80" onchange="" /&gt;
    &lt;/p&gt;
    &lt;div style="display:none"&gt;&lt;/div&gt;
    &lt;p class="form-field  company pd-text required    "&gt;
      &lt;label class="field-label"&gt;Company&lt;/label&gt;
      &lt;input type="text" value="" class="text" size="30" maxlength="255" onchange="" /&gt;
    &lt;/p&gt;
    &lt;div style="display:none"&gt;&lt;/div&gt;
    &lt;p class="form-field  email pd-text required    "&gt;
      &lt;label class="field-label"&gt;Email&lt;/label&gt;
      &lt;input type="text" value="" class="text" size="30" maxlength="255" /&gt;
    &lt;/p&gt;
    &lt;div style="display:none"&gt;&lt;/div&gt;
    &lt;p class="form-field  country pd-select required    form-field-master"&gt;
      &lt;label class="field-label"&gt;Country&lt;/label&gt;
      &lt;select class="select" onchange=""&gt;
  &lt;option value="27007" selected="selected"&gt;&lt;/option&gt;
  &lt;option value="27009"&gt;United States&lt;/option&gt;
  &lt;option value="27011"&gt;Canada&lt;/option&gt;
  &lt;option value="27013"&gt;Afghanistan&lt;/option&gt;
  &lt;/select&gt;
    &lt;/p&gt;
    &lt;div style="display:none"&gt;&lt;/div&gt;
    &lt;p class="form-field  state pd-select required    form-field-slave dependentFieldSlave"&gt;
      &lt;label class="field-label"&gt;State/Territory&lt;/label&gt;
      &lt;select class="select" onchange=""&gt;
  &lt;option value="27493" selected="selected"&gt;&lt;/option&gt;
  &lt;option value="27495"&gt;Alabama&lt;/option&gt;
  &lt;option value="27497"&gt;Alaska&lt;/option&gt;
  &lt;option value="27499"&gt;Alberta&lt;/option&gt;
  &lt;option value="27501"&gt;Arizona&lt;/option&gt;
  &lt;option value="27503"&gt;Arkansas&lt;/option&gt;
  &lt;/select&gt;
    &lt;/p&gt;
    &lt;div style="display:none"&gt;&lt;/div&gt;
    &lt;p class="form-field  Product_Interest pd-select required    "&gt;
      &lt;label class="field-label"&gt;Product Interest&lt;/label&gt;
      &lt;select size="5" multiple="multiple" onchange="" class="interest"&gt;
  &lt;option value="27623"&gt;Choice 1&lt;/option&gt;
  &lt;option value="27625"&gt;Choice 2&lt;/option&gt;
  &lt;option value="27627"&gt;Choice 3&lt;/option&gt;
  &lt;option value="27629"&gt;Choice 4&lt;/option&gt;
  &lt;option value="27631"&gt;Choice 5&lt;/option&gt;
  &lt;option value="27633"&gt;Choice 6&lt;/option&gt;
  &lt;option value="27635"&gt;Choice 7&lt;/option&gt;
  &lt;/select&gt;
    &lt;/p&gt;
    &lt;div style="display:none"&gt;&lt;/div&gt;
    &lt;p class="form-field  Customer_Type pd-select required    "&gt;
      &lt;label class="field-label"&gt;Customer Type&lt;/label&gt;
      &lt;select class="select" onchange=""&gt;
  &lt;option value="" selected="selected"&gt;&lt;/option&gt;
  &lt;option value="27657"&gt;Value 1&lt;/option&gt;
  &lt;option value="27659"&gt;Value 2&lt;/option&gt;
  &lt;option value="27661"&gt;Value 3&lt;/option&gt;
  &lt;option value="27663"&gt;Value 4&lt;/option&gt;
  &lt;/select&gt;
    &lt;/p&gt;
    &lt;div style="display:none"&gt;&lt;/div&gt;
    &lt;p class="form-field  GRG_Member pd-radio required  "&gt;
      &lt;label class="field-label"&gt;Member&lt;/label&gt;
      &lt;span class="value"&gt; &lt;span class="" style=""&gt;
  &lt;input type="radio"   value="27665" onchange="" /&gt;
  &lt;label class="inline" &gt;1 &lt;/label&gt;
  &lt;/span&gt; &lt;span class="" style=""&gt;
  &lt;input type="radio"  value="27667" onchange="" /&gt;
  &lt;label class="inline" &gt;2&lt;/label&gt;
  &lt;/span&gt;&lt;span class="" style=""&gt;
  &lt;input type="radio"  value="27669" onchange="" /&gt;
  &lt;label class="inline" &gt;3&lt;/label&gt;
  &lt;/span&gt;&lt;span class="" style=""&gt;
  &lt;input type="radio"   value="27671" onchange="" /&gt;
  &lt;label class="inline" &gt;4&lt;/label&gt;
  &lt;/span&gt;&lt;/span&gt;
    &lt;/p&gt;
    &lt;div style="display:none"&gt;&lt;/div&gt;
    &lt;p class="form-field  GRG_Professional pd-checkbox required    "&gt;
      &lt;label class="field-label"&gt;Professional?&lt;/label&gt;
      &lt;span class="value"&gt;&lt;span&gt;
  &lt;input type="checkbox"  value="27679" onchange="" /&gt;
  &lt;label class="inline" &gt;Yes&lt;/label&gt;
  &lt;/span&gt;&lt;span&gt;
  &lt;input type="checkbox"  value="27681" onchange="" /&gt;
  &lt;label class="inline" &gt;No&lt;/label&gt;
  &lt;/span&gt;&lt;span&gt;
  &lt;input type="checkbox"   value="27683" onchange="" /&gt;
  &lt;label class="inline" &gt;Maybe&lt;/label&gt;
  &lt;/span&gt;&lt;span&gt;
  &lt;input type="checkbox"  value="27685" onchange="" /&gt;
  &lt;label class="inline" &gt;Don't Know&lt;/label&gt;
  &lt;/span&gt; &lt;span&gt;
  &lt;input type="checkbox"  value="27687" onchange="" /&gt;
  &lt;/span&gt;&lt;/span&gt;
    &lt;/p&gt;
    &lt;div style="display:none"&gt;&lt;/div&gt;
    &lt;p class="submit"&gt;
      &lt;input type="submit" accesskey="s" value="SUBMIT" /&gt;
    &lt;/p&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>