How to write CSS to convert div elements into a 3 or 4 column table?

Question

I see CSS templates like Bootstrap. How do style my form into a div table like below?

With the following HTML:

<form>
    <fieldset>
        <legend>Legend</legend>

        <div>
            <div>
                <label for="first-name">First Name</label>
                <input id="first-name" type="text">
            </div>

            <div>
                <label for="last-name">Last Name</label>
                <input id="last-name" type="text">
            </div>

            <div>
                <label for="email">E-Mail</label>
                <input id="email" type="email" required>
            </div>

            <div>
                <label for="city">City</label>
                <input id="city" type="text">
            </div>
         <div>
         <label for="state">State</label>
                <select id="state" class="pure-input-1-2">
                    <option>AL</option>
                    <option>CA</option>
                    <option>IL</option>
                </select>
            </div>
        </div>

        <label for="terms" class="pure-checkbox">
            <input id="terms" type="checkbox"> I've read the terms and conditions
        </label>

        <button type="submit" class="pure-button pure-button-primary">Submit</button>
    </fieldset>

Answer 1

you can use the code the for you desired result

<form>
    <fieldset>
        <legend>Legend</legend>

<div class="container">
            <div>
                <label for="first-name">First Name</label>
                <input id="first-name" type="text">
            </div>

            <div>
                <label for="last-name">Last Name</label>
                <input id="last-name" type="text">
            </div>

            <div>
                <label for="email">E-Mail</label>
                <input id="email" type="email" required>
            </div>

            <div>
                <label for="city">City</label>
                <input id="city" type="text">
            </div>
            <div>
                <label for="state">State</label>
                <select id="state" class="pure-input-1-2">
                    <option>AL</option>
                    <option>CA</option>
                    <option>IL</option>
                </select>
            </div>

<div class="clear">
        <label for="terms" class="pure-checkbox">
            <input id="terms" type="checkbox"> I've read the terms and conditions
        </label>

        <button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
   </div>
    </fieldset>
    </form>

and use the style

.container {
            width:550px;
            float:left; 
            display:block;      
}
.container div{ float:left;
                position:relative; 
                display:block;
                width:180px;
                margin:5px 0px;
                }
.container div label{ width:100%; 
                        display:block; 
                        float:left;
                        color:#666666;
                        line-height:20px;
                        }
.clear{ clear:both;}
.pure-button{ color:#FFFFFF; 
            background:#0066FF;
            border:none;
            border-radius:2px;
            -moz-border-radius:2px;
            -webkit-border-radius:2px;
            margin:5px 0px;
            padding:5px;
            cursor:pointer;
            } 
.pure-button:hover{ background:#0033FF; }

input[type="text"],input[type="email"],select{
            border-radius:2px;
            -moz-border-radius:2px;
            -webkit-border-radius:2px;
            border:1px solid #999;
            padding:3px;

    } 

Answer 2

You may use bootstrap's Grid system http://getbootstrap.com/css/#grid-options

see Demo: http://jsbin.com/weyedivi/1/edit