Can this Submit button be moved? - html

Question

In this JSfiddle have I made a form without using tables.
The problem is that I can't get the submit button on the same line as "Type" and below the End Data field.
Does anyone know how to do that?
HTML
<div class="create-new">
<div id="create_result" style="display:none;">
</div>
<form id="create_form" name="create_form" action="" method="post">
<input name="anchor" id="anchor" value="create" type="hidden">
<label class="new" for="title">Title:</label>
<input class="new" type="text" name="title" id="title" />
<label class="new" for="owner">Owner:</label>
<input class="new" type="text" name="owner" id="owner" /><br class="new"/>
<label class="new" for="users">Users:</label>
<input class="new" type="text" name="users" id="users"/>
<label class="new" for="groups">Groups:</label>
<input class="new" type="text" name="groups" id="groups" /><br class="new"/>
<label class="new" for="begin_date">Begin Date:</label>
<input class="new" type="text" id="from" name="from"/>
<label class="new" for="end_date">End Date:</label>
<input class="new" type="text" id="to" name="to"/><br class="new"/>
<label class="new" for="type">Type:</label>
<input name="ctype" id="ctype" value="individuel" type="radio" /> Individuel <br/>
<input name="ctype" id="ctypee" value="course" type="radio" /> Course <br/>
<button class="n" type="submit">Create</button>
</form>
</div>
CSS
label.new, input.new, select.new, textarea.new { display: block; float: left; width: 150px; margin-bottom: 10px; }
label.new { width: 110px; text-align: right; padding-right: 10px; margin-top: 2px; }
textarea.new { height: 50px; }
br.new { clear: left; }
i nput.n { display: block; float: right; width: 150px; }
.create-new { display: inline-block; position: relative; left: 25%; }

Answer 1

I changed input.n to button.n and adjusted the styles to display:inline
button.n { display: inline; float: right; width: 150px; }
I also moved the button placement in your code to right under the label
<label class="new" for="type">Type:</label>
<button class="n" type="submit">Create</button>
<input name="ctype" id="ctype" value="individuel" type="radio" /> Individuel
http://jsfiddle.net/jasongennaro/CKC29/

Answer 2

One way to do it would be to put the items into a list (ul) then in your CSS set display: inline; for the two elements you would like to be on the same line.

Answer 3

You could try this:
Add the button.n selector to the first two label lines on top, so that it does the same as the labels so as the label with type.
button.n, label.new, input.new, select.new, textarea.new { display: block; float: left; width: 150px; margin-bottom: 10px; }
button.n, label.new { width: 110px; text-align: right; padding-right: 10px; margin-top: 2px; }
If the class name of n was a typo in your code above, just take the right classname, probably new instead of n.

Answer 4

The only way of doing it changing only the css is to set "display:inline" for the inputs that preceed your submit buttom.