How to place web form elements on a new line?

Question

How to place input elements on new lines? In the above example, all elements are placed sequentially, i.e. 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> 

Answer 1

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

This will add each entry to a new line. - Removed "float: left", added "display: block".

Answer 2

My hunch is user1359163. The answer to the questionnaire will help you, although it may be interesting for you to find out why: using float effectively removes the element from the normal document flow, which is a bit like changing the z-index , allowing the element to go through div borders, labels, spaces and ... "ignore" clear styles.

An element behaves as if it floats above other elements, therefore, in this regard, it remains free from the left and right of all other elements that do not float. I'm not a CSS expert, but this way of looking at it helped me solve problems with distorted layouts that I encountered when using the float , clear and z-index styles.

Answer 3

Have you tried something simple like

 <label>Name: </label><br> <input type="text" name="name" id="name"/> <label>Email: </label><br> <input type="text" name="email" id="email"/> 

Answer 4

Here is the JsFiddle for this ...

Edit:

 #stylized label{ font-size:11px; font-weight:bold; text-align:right; } #stylized input{ display:block; font-size:11px; padding:4px 2px; border:solid 1px #aacfe4; width:70px; margin:2px 0 20px 10px; }​ 

Answer 5

You prevent new lines from appearing when you select a floating layout with enough space for all elements.

Try the following:

Example http://jsfiddle.net/8yZff/

 #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; } 

Answer 6

For tabular data, such as an array of shortcut / field pairs, use table . You will find the style is much simpler, and the opaque appearance is much better.