How to split a form into two columns?

Question

I have a basic form which passes input to a PHP script. I'd like to split the form up so that the second sub-entry (Person 2) sits in a column to the right of the first (Person 1), rather than directly below.

<link rel="stylesheet" href="test.css">    
    <form class="form-validation" method="post" action="script.php">
       <link rel="stylesheet" href="test.css">
       <h2>Person 1:</h2>
       <br>
       <div class="form-row form-input-name-row">
          <label>
          <span>Name</span>
          <input name="field1" type="text">
          </label>
       </div>
       <div class="form-row form-input-name-row">
          <label>
          <span>Age</span>
          <input name="field2" type="text">
          </label>
       </div>
       <div class="main-content">
          <h2>Person 2:</h2>
          <br>
          <div class="form-row form-input-name-row">
             <label>
             <span>Name</span>
             <input name="field3" type="text">
             </label>
          </div>
          <div class="form-row form-input-name-row">
             <label>
             <span>Age</span>
             <input name="field4" type="text">
             </label>
          </div>
    </form>
    <div>
    <button name="submit">Submit form</button>
    </div>
    </div>

Check out my answer here with bootstrap enabled: http://stackoverflow.com/questions/35737985/form-design-with-bootstrap-align-text-boxes-and-text-areas/35738229#35738229 Working example, resize your browser and see result: https://jsfiddle.net/L4LtoLsz/ — Muhammed, Mar 02 '16 at 04:15
Select one of the answers as the top one, if either worked for you. — symlink, Mar 03 '16 at 02:50

symlink · Accepted Answer · 2016-03-02T04:00:27.167

Wrap both entries in a div with the same class (e.g. "sub-entry") and float them left with a width of 50%:

.sub-entry {
    width: 50%;
    float: left;
}

.button {
    text-align: center;
    padding-top: 20px;
    clear: both;
}

<form class="form-validation" method="post" action="script.php">
    <link rel="stylesheet" href="test.css">
    <div class="sub-entry">
        <h2>Person 1:</h2>
        <br>
        <div class="form-row form-input-name-row">
            <label>
                <span>Name</span>
                <input name="field1" type="text">
            </label>
        </div>
        <div class="form-row form-input-name-row">
            <label>
                <span>Age</span>
                <input name="field2" type="text">
            </label>
        </div>
    </div>
    <div class="sub-entry">
        <div class="main-content">
            <h2>Person 2:</h2>
            <br>
            <div class="form-row form-input-name-row">
                <label>
                    <span>Name</span>
                    <input name="field3" type="text">
                </label>
            </div>
            <div class="form-row form-input-name-row">
                <label>
                    <span>Age</span>
                    <input name="field4" type="text">
                </label>
            </div>
        </div>
    </div>
</form>
<div class="button">
    <button name="submit">Submit both forms</button>
</div>

Notice I also gave the div containing the button a class button and styled it to the center of the form.

score 3 · Answer 2 · edited May 23 '17 at 12:31

You can try CSS flexbox.

form { display: flex; }

<form class="form-validation" method="post" action="script.php">

  <div class="person-1">
    <h2>Person 1:</h2>
    <div class="form-row form-input-name-row">
      <label>
        <span>Name</span>
        <input name="field1" type="text">
      </label>
    </div>
    <div class="form-row form-input-name-row">
      <label>
        <span>Age</span>
        <input name="field2" type="text">
      </label>
    </div>
  </div><!-- end .person-1 -->
  
  <div class="main-content person-2">
    <h2>Person 2:</h2>
    <div class="form-row form-input-name-row">
      <label>
        <span>Name</span>
        <input name="field3" type="text">
      </label>
    </div>
    <div class="form-row form-input-name-row">
      <label>
        <span>Age</span>
        <input name="field4" type="text">
      </label>
    </div>
  </div><!-- end .person-2 -->
  
</form>

<div><button name="submit">Submit form</button></div>

Benefits of flexbox:

minimal code; very efficient
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex elements
it's responsive
unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More browser compatibility details in this answer.

How to split a form into two columns?

2 Answers2