Form with Two Columns

Question

Hello as the title states I would like to create a form with 2 columns. In the end I want it to look like this jsfiddle I've been playing with. however by looking at the code I don't believe this is the proper way, correct me if I'm wrong.

The code is a standard MVC ViewModel that creates an entry into a database.

here is the code I currently have in jsfiddle:

HTML

<label for="IDofInput">text goes here</label> <label for="IDofInput">text goes here</label> <br />
<input type="text" id="IDofInput" /> <input type="text" id="IDofInput" />
</p>

CSS

label {width: 140px; padding-right: 20px; display: inline-block }

Grip

table / horizontal list / equal width floating divs/ pick your favorite – Serenaserenade

Answer 1

There are many ways to achieve this. I'm a fan of using lists (jsFiddle):

HTML

<ul>
    <li>
        <label>Label 1</label>
        <input type="text" />
    </li>
     <li>
        <label>Label 2</label>
        <input type="text" />
    </li>
     <li>
        <label>Label 3</label>
        <input type="text" />
    </li>
     <li>
        <label>Label 4</label>
        <input type="text" />
    </li>
</ul>

CSS:

ul {
    width: 100%;
}
ul li {
    width: 49%;
    display: inline-block;
}

ul li > * {
    width: 100%;
}

By the way, I used 49%, because on some browser, things mess up. Ideally, you'll want 50%.

[Edit] Now if you want to support only IE10+, you can use column-count as well:

ul {
    column-count:2;
    -moz-column-count:2; /* Firefox */
    -webkit-column-count:2; /* Safari and Chrome */
}

ul li label {
    display: block;
}

Condemnation

Thanks this is what I was looking for thank you. I'll mark as answer when it allows me to – Grip

Answer 2

Here's an updated fiddle: http://jsfiddle.net/L5NUH/2/

The previous answer uses display: inline-block; but another method would be to use floated columns.

HTML:

<div class="row">
    <div class="col">
        <label for="IDofInput">text goes here</label> 
        <input type="text" id="IDofInput" /> 
    </div>
    <div class="col">
        <label for="IDofInput">text goes here</label> 
        <input type="text" id="IDofInput" />
    </div>
</div>

CSS:

.row {
    background: #f6f6f6;
    border: 1px solid #ccc;
    overflow: hidden;
    padding: 10px;
}
.col {
    float: left;
    width: 50%
}

Kristalkristan

Answer 3

For Bootstrap

<form>
  <div class="row">
    <div class="col-md-6">
      <label for="IDofInput">text goes here</label> 
      <input type="text" id="IDofInput" />
    </div>
    <div class="col-md-6">
      <label for="IDofInput2">text goes here</label> 
      <input type="text" id="IDofInput2" />
      ...
    </div>
  </div>
</form>

Fell