CSS & Form issue - giving me strife :( [closed] - html

Question

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I have created a form and it is supposed to look like this:
Can someone please help me edit my code to look like the above image and explain what I was doing wrong? A JSFiddle would be amazing so I can understand how to fix it.
The zip label and field needs to be brought up and the submit button pushed to the right, yet it's not working for me :(
My attempt is as follows:
http://jsfiddle.net/2w6mK/
CSS:
#form-container {
width: 710px;
height: 450px;
padding: 20px 50px;
margin: 35px 0 0 25px;
}
form {
position: relative;
margin-left: -10px;
}
form label {
display: block;
font: normal 12px/16px arial, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000;
text-transform: uppercase;
text-align: left;
}
form [type="text"],
form [type="email"] {
display: block;
border: 1px solid #000;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font: 12px/14px arial, helvetica, verdana, sans-serif;
width: 60%;
padding: 5px 5px;
margin: 5px 0;
-webkit-appearance: none;
}
.zip {
display: block;
border: 1px solid #000;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font: 12px/14px arial, helvetica, verdana, sans-serif;
width: 20%;
padding: 5px 5px;
margin: 5px 0;
-webkit-appearance: none;
}
.dob-select {
display: block;
border: 1px solid #000;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font: 12px/14px arial, helvetica, verdana, sans-serif;
width: 80px;
height:25px;
-webkit-appearance: none;
overflow: hidden;
background: url("http://s17.postimage.org/4tmf81arf/down_arrow.png") no-repeat right #fff;
float: left;
margin-right: 5px;
}
.dob-select select {
background: transparent;
width: 125px;
height: 25px;
border: none;
padding: 5px 0 0 5px;
color: #cccccc;
}
.left {
float: left;
}
form [type="submit"] {
display: block;
background-image: url("http://findmuck.files.wordpress.com/2012/06/green_submit_button_by_rukiaxichigo15.jpg") no-repeat;
margin: 25px auto;
width: 154px;
height:57px;
border: none;
color: transparent;
font-size: 0;
float: left;
}
form input[type=submit]:hover {
background-image: url("http://findmuck.files.wordpress.com/2012/06/green_submit_button_by_rukiaxichigo15.jpg") no-repeat;
cursor: hand;
cursor: pointer;
}
#FileUpload {
position:relative;
margin-top: -13px;
padding-bottom: 15px;
}
#BrowserVisible {
position: absolute;
top: 0;
left: 0;
z-index: 1;
background:url(images/btn_browse.gif) 100% 0px no-repeat;
height:27px;
width:390px;
cursor: hand;
cursor: pointer;
}
#FileField {
display: block;
margin-right: 85px;
border: 1px solid #000;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font: 12px/14px arial, helvetica, verdana, sans-serif;
color: #777;
width: 300px;
padding: 5px 5px;
-webkit-appearance: none;
}
HTML:
<div id="form-container">
<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name">
</fieldset>
<fieldset>
<label for="dob">date of birth</label>
<div class="dob-select">
<select name="dob_day">
<option value="01">01</option>
</select>
</div>
<div class="dob-select">
<select name="dob_month">
<option value="01">Jan</option>
</select>
</div>
<div class="dob-select">
<select name="dob_year">
<option value="2012">2012</option>
</select>
</div>
</fieldset>
<fieldset>
<label for="zip">zip</label>
<input type="text" class="short" name="zip">
</fieldset>
<fieldset>
<label for="email">Email</label>
<input type="email" name="email">
</fieldset>
<fieldset>
<label for="subscribe"><input type="checkbox" class="left"> <p class="left">Tick</p></label>
<input type="submit" name="submit">
</fieldset>
</form>
</div>

Answer 1

EDIT 2:
Add
.short{
width: auto !important;
}
to CSS to draw the ZIP field with full lenght as in picture.
EDIT: remove border: 1px solid silver; when you have understood how positioning is working, it's for debug purpose ;)
Look at: http://jsfiddle.net/pb6mM/3/
form input[type="submit"]{
position: absolute;
right: 0;
bottom: 0;
}
fieldset{
border: 1px solid silver;
}
.fieldsetDate{
padding-right: 30px;
}
.inlineBlock{
display: inline-block;
}
And added
margin-top: 6px;
margin-bottom: 6px;
to .dob-select { to make it the same height of the normal text field.
HTML:
<div id="form-container">
<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name">
</fieldset>
<fieldset class="fieldsetDate inlineBlock">
<label for="dob">date of birth</label>
<div class="dob-select">
<select name="dob_day">
<option value="01">01</option>
</select>
</div>
<div class="dob-select" >
<select name="dob_month">
<option value="01">Jan</option>
</select>
</div>
<div class="dob-select">
<select name="dob_year">
<option value="2012">2012</option>
</select>
</div>
</fieldset>
<fieldset class="inlineBlock">
<label for="zip">zip</label>
<input type="text" class="short" name="zip">
</fieldset>
<fieldset>
<label for="email">Email</label>
<input type="email" name="email">
</fieldset>
<fieldset>
<label for="subscribe"><input type="checkbox" class="left"> <p class="left">Tick</p></label>
<input type="submit" name="submit">
</fieldset>
</form>
</div>

Answer 2

Add Position:absolute to input button. and there is slight changes in the html code. Check the demo.
DEMO
SAMPLE CSS FORM