How can I make my DIVs appear 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 to make the input field appear below the label. Right now it just follows the label on the same line. Is there a way that I can do this with CSS?

Answer 1

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.

Answer 2

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/