CODEWITHSUNDEEP
css
MikeSwanson
MikeSwanson

Reputation: 497

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 the label. Right now it just follows the label on the same line. Is there a way that I can do this with CSS?

Upvotes: 7

Views: 48598

Answers (6)

John Flatness
John Flatness

Reputation: 33749

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.

Upvotes: 14

Blender
Blender

Reputation: 298056

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>

Upvotes: 0

mu is too short
mu is too short

Reputation: 434585

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/

Upvotes: 0

JohnP
JohnP

Reputation: 50009

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/

Upvotes: 3

Kamyar
Kamyar

Reputation: 18797

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.

Upvotes: 1

Josh M.
Josh M.

Reputation: 27773

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

Upvotes: 2

Related Questions