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

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"&开发者_运维百科gt;
</form>
</div>

See the fiddle. Any ideas?

Thanks!

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.

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.

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;!

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>

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 :)

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>

what about

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

    <div position:relative">
    </div>
</form>