Блог

У меня есть 1 form , и я хотел бы разместить его в 2 div секциях, чтобы следующее:

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

<div position:relative">
<form id="testForm2">
</form>
</div>
  

было бы превращено во что-то вроде этого:

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

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

Посмотрите на скрипку. Есть идеи?

Спасибо!

Что вы хотите, так это разместить форму вокруг обоих разделов следующим образом:

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

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

Вот обновленная версия вашего jsFiddle.

Редактировать
Кроме того, стиль вашего второго раздела неверен. Теперь это исправлено в моем примере.

Разметка в вашем файле jsFiddle потребовала некоторой очистки. Это то, что я бы выбрал, пытаясь несколько минимизировать ваш код:

 <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}
  

Я обновил ваш файл jsFiddle. Здесь.

Разве вы не можете просто сделать так, чтобы два раздела находились внутри формы? Вот так:

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

    <div position:relative">
      Form Content Here
    </div>
</form>
  

Если форма влияет на макет вашей страницы, убедитесь, что вы установили стиль формы на display:inline; !

Как сказали Drackir и joe_coolish, вам не нужно вкладывать теги формы таким образом.

Обычно я всегда открываю весь блок содержимого с тегом form, полностью изолированным от другого содержимого. В этом нет абсолютно никакого вреда. В форму можно вложить что угодно, включая <h1> и целые макеты, если вы знаете, что каждый ввод в нее будет принадлежать этой форме.

 <form>
<!-- tons of content here including layout -->
</form>
  

Разве вы не можете просто поместить 2 раздела внутри тегов ФОРМЫ? Что-то вроде:

 <form>
<div id="one">
    ...
</div>
<div id="two">

</div>
</form>
  

редактировать: кажется, я немного опоздал 🙂

Просто переместите <div> теги внутри <form> …

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

как насчет

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

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