How to make a web form with 3 columns?

css, html, stylesheet

Solution

DEMO: http://jsfiddle.net/bfZR4/

Basically, if you put all three into `div`s with a class of `column` like so:

<div id="stylized" class="myform">
    <form id="form" name="form" method="post" action="index.html">
        <h1>Data</h1>
        <div class="column">
            <label>Name: </label>
            <input type="text" name="name" id="name"/>
        </div>
        <div class="column">
            <label>Email: </label>
            <input type="text" name="email" id="email"/>
        </div>
        <div class="column">
            <label>Password: </label>
            <input type="text" name="password" id="password"/>
        </div>
    </form>

Then you can apply the following style to the `column` class:

.column
{
    float: left;
    width: 33%;
}

Problem

How to make a web form with 3 columns using CSS? In the above example all elements are placed just in a single column. ``` <html> <head> <style> /* ----------- My Form ----------- */ .myform{ margin:0 auto; padding:14px; } #stylized{ border-width:1px; border-style:solid; border-color:#b7ddf2; background:#ebf4fb; } #stylized h1 { font-size:14px; font-weight:bold; margin-bottom:8px; border-width:1px; border-style:solid; border-color:#b7ddf2; padding-bottom:10px; } #stylized label{ font-size:11px; font-weight:bold; text-align:right; } #stylized input{ font-size:11px; padding:4px 2px; border:solid 1px #aacfe4; width:70px; margin:2px 0 20px 10px; display: block; } /* --------- End of Form --------- */ </style> </head> <body> <div id="stylized" class="myform"> <form id="form" name="form" method="post" action="index.html"> <h1>Data</h1> <label>Name: </label> <input type="text" name="name" id="name"/> <label>Email: </label> <input type="text" name="email" id="email"/> <label>Password: </label> <input type="text" name="password" id="password"/> </form> </div> </body> </html> ```

Original source