How can I make my divs below each other

Question

I have the following:

<div style="float: left; padding-right: 1%;"> <label class="editor-label" for="BrowserTitle">Browser Title</label> <input class="editor-field" id="BrowserTitle" name="Question.BrowserTitle" size="30" type="text" value="Test title" /> </div> 

I want the input box to appear under the label. Now it just follows the label on the same line. Is there a way I can do this with CSS?

Answer 1

Set

 display: block; 

on the label or in the input.

Note. As pointed out in the comment, you also need to remove the float style from your containing div if you want divs to display under each other.

Answer 2

You can put label and input in your own div or set each to display: block in CSS.

Answer 3

Why not remove the float on the DIV and make the LABEL block?

 <div style=" padding-right: 1%;"> <label class="editor-label" style='display:block;' for="BrowserTitle">Browser Title</label> <input class="editor-field" id="BrowserTitle" name="Question.BrowserTitle" size="30" type="text" value="Test title" /> </div> 

Demo: http://jsfiddle.net/h7mnJ/

Answer 4

place the label inside the div:

 <div style="float: left; padding-right: 1%;"> <div> <label class="editor-label" for="BrowserTitle">Browser Title</label> <div> <input class="editor-field" id="BrowserTitle" name="Question.BrowserTitle" size="30" type="text" value="Test title" /> 

See Results at: http://jsfiddle.net/uUEn8/ You can also set display:block to a label or input.

Answer 5

You can put display: block on the label:

 .editor-label { display: block; } 

Example: http://jsfiddle.net/ambiguous/b5UrP/

Or you can put both the label and the input on the left and put clear: left on the input:

 .editor-label { float: left; } .editor-field { clear: left; float: left; } 

Example: http://jsfiddle.net/ambiguous/hxhCx/

Answer 6

Since all CSS solutions are exhausted, here is an HTML solution with a <br /> element:

 <div style="float: left; padding-right: 1%;"> <label class="editor-label" for="BrowserTitle">Browser Title</label> <br /> <input class="editor-field" id="BrowserTitle" name="Question.BrowserTitle" size="30" type="text" value="Test title" /> </div>