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

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

Вырежьте и вставьте ваш враг. Я сомневаюсь, что вам нужны дубликаты форм, одна или каждая половина формы записи. Кроме того, вы используете положение относительно повсюду. Если вы делаете это, то вы, вероятно, делаете что-то не так. В этом решении я поместил два элемента 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 -->