フォームに余白を追加できないのはなぜですか？

Question

これはこれは、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; 
} 

上マージンである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> 

では、関係なく、私はそれをどのように変化するかを何度も、正しい座標を持っていることはありません。マージンを変更するたびに、それは視覚的に同じ場所に戻ってくるだけです。どうして？ #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

カットアンドペーストはあなたの敵です。私はあなたが重複したフォーム、フォームエントリの1つまたはそれぞれの半分をしたいとは思わない。また、あなたは場所全体の相対的な位置を使用しています。あなたがそれをしているなら、おそらく何か間違っているでしょう。このソリューションでは、2つの入力divを左に浮かしました。 stylized1の上マージンを調整して配置することができます。私はまたあなたの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 -->