How can I make my DIVs appear below each other

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 to make the input field appear below th开发者_如何学JAVAe label. Right now it just follows the label on the same line. Is there a way that I can do this with CSS?

Set

display: block;

on either the label or the input.

Note: As pointed out in a comment, you'd also need to remove the float style from your containing div if you want the divs to appear below each other.

Why not remove the float on the DIV and make the LABEL a 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/

You can put the label and the input in their own divs or set each to display: block in CSS.

put label inside a 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 the results at: http://jsfiddle.net/uUEn8/ Also you can set display:block on either label or input.

You can put display: block on the label:

.editor-label {
    display: block;
}

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

Or you could float both the label and input to 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/

As all of the CSS solutions have been exhausted, here's a HTML solution with the <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>