Search code examples
htmlcssstylesheet

How to make a web form with 3 columns?


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>

Solution

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

    Basically, if you put all three into divs 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%;
    }