HTML how to place a form in 2 divs/columns? - html

Question

I have 1 form and I would like to place it in 2 divs, so that the following:
<div style="float:left; position:relative; margin-right:40px">
<form id="testForm2">
</form>
</div>
<div position:relative">
<form id="testForm2">
</form>
</div>
would be turned into something like this:
<div style="float:left; position:relative; margin-right:40px">
<form id="testForm2">
</div>
<div position:relative">
</form>
</div>
See the fiddle. Any ideas?
Thanks!

Answer 1

What you want, is to put the form around both divs like so:
<form id="testForm2">
<div style="float:left; position:relative; margin-right:40px">
</div>
<div style="position:relative">
</div>
</form>
Here's an updated version of your jsFiddle.
Edit
Also, your second div's style is incorrect. It's fixed now in my example.

Answer 2

The markup in your jsFiddle file required some tidying up. This is what i would go with, trying to minimize your code somewhat:
<div class="post_edit_modeling">
<div class="tab_trash">
<div id="prof_picture">
<form id="testForm2">
<fieldset id="left">
<legend>Sex:</legend>
<div>
<label>
<input type="radio" name="sex" id="genderMale" value="male" />
Male
</label>
</div>
<div>
<label>
<input type="radio" name="sex" id="genderFemale" value="female" />
Female
</label>
</div>
<div>
<label>Weight</label>
<input id="weightpounds" type="text" name="weightpounds"/>
</div>
<div>
<label>Bust</label>
<input id="bust" type="text" name="bust"/>
</div>
</fieldset>
<fieldset id="right">
<div>
<label>Cup</label>
<input id="cup" type="text" name="cup"/>
</div>
<div>
<label>Waist</label>
<input id="waist" type="text" name="waist"/>
</div>
<div>
<label>Hips</label>
<input id="hips" type="text" name="hips"/>
</div>
<div>
<label>Hair Color</label>
<select name="haircolor">
<option value="1">White</option>
<option value="2">Black</option>
<option value="3">Yellow</option>
<option value="4">Blue</option>
</select>
</div>
<div>
<label>Dress Size</label>
<input id="dress" type="text" name="dress"/>
</div>
</fieldset>
<fieldset>
<div>
<input type="button" name="btnUpdate" id="btnUpdate" value="Update" />
</div>
</fieldset>
</form>
</div>
</div>
</div>
CSS:
form div {float: left; margin-bottom: 15px;}
fieldset { float: left; width: 200px; border: 0; padding: 0; margin: 0;}
#left { }
#right { margin-right: 0; }
label {float: left;}
input {clear: both;; float: left}
Ive updated your jsFiddle file. Here.

Answer 3

Can you not just make the two divs live inside the form? Like this:
<form id="testForm2">
<div style="float:left; position:relative; margin-right:40px">
Form Content Here
</div>
<div position:relative">
Form Content Here
</div>
</form>
If the form is affecting your page layout, make sure that you set the form style to display:inline;!

Answer 4

As Drackir and joe_coolish said, you don't need to nest your form tags that way.
Typically I always open the entire content block with the form tag, totally isolated from the other content. There's absolutely no harm in doing things this way. ANything including <h1> and entire layouts can be nested in a form, as long as you know that every input within it will belong to that form.
<form>
<!-- tons of content here including layout -->
</form>

Answer 5

Can't you just put the 2 DIV's inside the FORM tags? Something like:
<form>
<div id="one">
...
</div>
<div id="two">
</div>
</form>
edit: Seems I'm a little too late :)

Answer 6

Just move your <div> tags within the <form>...
<form id="testForm2">
<div style="float:left; position:relative; margin-right:40px">
... left side ...
</div>
<div position:relative">
... right side ...
</div>
</form>

Answer 7

what about
<form id="testForm2">
<div style="float:left; position:relative; margin-right:40px">
</div>
<div position:relative">
</div>
</form>