CODEWITHSUNDEEP
htmlforms
Patrioticcow
Patrioticcow

Reputation: 27038

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">
</form>
</div>

See the fiddle. Any ideas?

Thanks!

Upvotes: 1

Views: 20113

Answers (7)

Pete
Pete

Reputation: 1482

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.

Upvotes: 2

Richard Marskell - Drackir
Richard Marskell - Drackir

Reputation: 13302

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.

Upvotes: 9

jrn.ak
jrn.ak

Reputation: 36619

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>

Upvotes: 1

Dnns
Dnns

Reputation: 2844

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

Upvotes: 1

No Results Found
No Results Found

Reputation: 102745

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>

Upvotes: 1

Karl Nicoll
Karl Nicoll

Reputation: 16419

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

Upvotes: 1

joe_coolish
joe_coolish

Reputation: 7259

what about 

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

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

Upvotes: -1

Related Questions