Home/ Questions/Q 7866755
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T00:29:53+00:00

How to make a web form with 3 columns using CSS? In the above

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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%;
}
    • 0