Question

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>