Why can I not add margins to my form? - css

Question

This is the 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>
This is the 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;
}
The top margin, no matter how many times I change it, never has the correct coordinates. Every time I change the margin, it just goes back to the same place visually. How come? Is it because of the #container width? Or do I need some code? I'm fairly new to this. Thanks for your help.
#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

Cut and paste are your enemy. I doubt you want duplicate forms, one or each half of the form entry. Also, you are using position relative all over the place. If you are doing that then you are probably doing something wrong. In this solution I floated the two entry divs to the left. You can adjust the top-margin on stylized1 to position it. I also cleaned up a lot of your html structure.
I was kind of assuming you were editing top margin on the element with -1600px, but if I am wrong please let me know which one you were editing margins on.
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 -->