How to put web form elements on a new line?

css, html

Solution

#stylized input{
    display: block;
    font-size:11px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:70px;
    margin:2px 0 20px 10px;
}

This will put every input on a new line. - Removed "float: left", added "display: block".

Problem

How to place "input" elements on new lines? In the above example all elements are placed sequentially, ie lable->input->lable->input, etc. ``` /* ----------- 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{ display:block; font-size:11px; font-weight:bold; text-align:right; float:left; } #stylized input{ float:left; font-size:11px; padding:4px 2px; border:solid 1px #aacfe4; width:70px; margin:2px 0 20px 10px; } /* --------- End of Form --------- */ <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> ```

Original source