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 }

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;
}