Почему я не могу добавить поля в свою форму?

Question

Это HTML-

 <div id="header"> 
     </div> <!-- end header --> 

     <div id="main"> 
      <div id="stylized" class="myform"> 
      <form id="form" name="form"> 
       <label>Name 
       <span class="small">of company, business, etc...</span> 
       </label> 
       <input type="text" name="name" id="name"/> 

       <label>Status Message 
       <span class="small">Max 40 Characters</span> 
       </label> 
       <input type="text" name="statusmessage" id="statusmessage"> 

       <label>URL to Menu 
       </label> 
       <input type="text" name="url" id="url"/> 

       <button type="submit">Submit</button> 
       <div class="spacer"> 
       </div> 
      </form><!-- end form --> 

      <div id="stylized1" class="myform1"> 
       <form id="form1" name="form"> 
       <label>Street Address 
       </label> 
       <input type="text" name="stretaddress" id="streetaddress"/> 

       <label>City 
       </label> 
       <input type="text" name="city" id="city"/> 

       <label>State 
       </label> 
       <input type="text" name="state" id="state"/> 

       <label>ZIP 
       </label> 
       <input type="text" name="zip" id="zip"/> 

       <div class="spacer"> 
       </div> 
       </form><!-- end form1--> 
      </div><!-- end stylized --> 

     </div><!-- end main --> 
    </div><!-- end container --> 

</body> 
    </head> 

Это является CSS-код

#container { 
    margin: auto; 
    width: 800px; 
} 

#header { 
    position: relative; 
    height: 147px; 
    background: url(images/header.png) no-repeat; 
} 

#main { 
    position: relative; 
    height: 653px; 
    background: url(images/main.png) no-repeat; 
} 

#form { 
    color: #c4c1c1; 
    margin: 100px 20px 0px 10px; 
} 

.spacer{ 
    clear:both; 
    height:1px; 
} 

#stylized{ 
    border:solid 2px #c4c1c1; 
} 

#stylized label{ 
    display:block; 
    font-family: arial; 
    font-weight:bold; 
    width:140px; 
    margin: 2px 0 0px 10px; 
} 

#stylized .small{ 
    color:#c4c1c1; 
    display:block; 
    font-size:12px; 
    font-weight:normal; 
    width:140px; 
} 

#stylized input{ 
    float:left; 
    font-size:15px; 
    padding:5px 25px; 
    border:solid 1px #c4c1c1; 
    width:200px; 
    margin:2px 0 20px 10px; 
} 

#stylized button{ 
    clear:both; 
    margin:133px 0 0px 100px; 
    width:125px; 
    height:31px; 
    text-align:center; 
    line-height:3px; 
    color:4b4b4b; 
    font-size:15px; 
    font-weight:bold; 
} 

#stylized1{ 
    position: relative; 
    margin: -1600px 0px 10px 450px; 
} 

верхнего края, независимо от того, сколько раз я могу изменить его, никогда не имеет правильные координаты. Каждый раз, когда я меняю границу, он просто возвращается в одно и то же место визуально. Как так? Это из-за ширины #container? Или мне нужен какой-то код? Я довольно новичок в этом. Спасибо за вашу помощь.

#stylized1 label{ 
    display:block; 
    float:left; 
    font-family: arial; 
    font-weight:bold; 
    width:140px; 
    color:#c4c1c1; 
    margin: 2px 0px 0px 10px; 
} 

#stylized1 input{ 
    font-size:15px; 
    padding:5px 25px; 
    border:solid 1px #c4c1c1; 
    width:200px; 
    margin:0px 0px 20px 10px; 
} 

Answer 1

Вырезать и вставить ваш враг. Я сомневаюсь, что вы хотите дублировать формы, одну или каждую половину записи формы. Кроме того, вы используете позицию по всему месту. Если вы это делаете, вы, вероятно, делаете что-то неправильно. В этом решении я поместил два входных divs влево. Вы можете настроить верхний край на стилизованный1, чтобы поместить его. Я также очистил много вашей структуры html.

Я предположил, что вы редактируете верхнюю границу элемента с -1600px, но если я ошибаюсь, сообщите мне, на какой из них вы редактировали поля.

http://jsfiddle.net/fVh23/

<div id="container"> 
    <div id="header"></div> <!-- end header --> 

    <div id="main"> 
     <form id="form" name="form"> 
      <div id="stylized"> 

       <label>Name 
       <span class="small">of company, business, etc...</span></label> 
       <input type="text" name="name" id="name"/> 

       <label>Status Message 
       <span class="small">Max 40 Characters</span></label> 
       <input type="text" name="statusmessage" id="statusmessage"> 

       <label>URL to Menu</label> 
       <input type="text" name="url" id="url"/> 

      </div> <!-- end stylized --> 

      <div id="stylized1"> 

       <label>Street Address</label> 
       <input type="text" name="stretaddress" id="streetaddress"/> 

       <label>City</label> 
       <input type="text" name="city" id="city"/> 

       <label>State</label> 
       <input type="text" name="state" id="state"/> 

       <label>ZIP</label> 
       <input type="text" name="zip" id="zip"/> 

      </div><!-- end stylized1 --> 
      <br style="clear: both;" /> 
      <button type="submit">Submit</button> 
      <div class="spacer"> 

     </form><!-- end form1--> 
    </div><!-- end main --> 
</div><!-- end container -->