I am currently trying to finish up a little exercise I did. I am trying to align both my text input and my select input boxes, but I can't seem to figure out how to align the select list to the input box. I have tried using labels and css, and tables, but somehow my forms end up scattered across each other. Any help is greatly appreciated:
<!DOCTYPE html>
<html>
<head>
<title>Game Intro</title>
<link rel="stylesheet" type="text/css" href="http://localhost/webtech/sample.css"
</head>
<body>
<h1>Character Creation</h1>
<h2>You have 10 Gold Pieces</h2>
<ul>
<li>1 gold piece buys 10 health tokens</li>
<li>1 gold piece buys 2 experience tokens</li>
<li>1 gold piece buys 10 supply tokens</li>
</ul>
<form action="gameIntro.php" method="post">
<table>
<p>Enter your character's name:
<input type="text" size="20" name="character_name" /></p>
<p>Select your character class:
<select name="character_class">
<option>Dwarf</option>
<option>Human</option>
<option>Elf</option>
<option>Wizard</option>
</select>
</p>
<p>Purchase health tokens:
<select name="health_token">
<option>0</option>
<option>10</option>
<option>20</option>
<option>30</option>
</select>
</p>
<p>Purchase experience tokens:
<select name="experience_token">
<option>0</option>
<option>2</option>
<option>4</option>
<option>6</option>
<option>8</option>
<option>10</option>
</select>
</p>
<p>Purchase supply tokens:
<select name="supply_token">
<option>0</option>
<option>25</option>
<option>50</option>
<option>75</option>
<option>100</option>
</select>
</p>
<p><input type="submit" value="Submit your Character" />
<input type="reset" value="Reset your Character" /></p>
</table>
</form>
<a href={"http://localhost/index.html"}>Go back to Homepage</a>
</body>
</html>
css file:
body { background: white }
h1 { font-family: Arial, Helvetica, Sans-Serif;
font-size: 18pt; color: black; font-weight: bold; }
h2 { font-family: Arial, Helvetica, Sans-Serif;
font-size: 16pt; color: black; font-weight: bold; }
p { font-family: Arial, Helvetica, Sans-Serif;
font-size: 12pt; color: black; font-weight: bold; }
p.alert { font-style: italic; color: red; }
table { font-family: Arial, Helvetica, Sans-Serif;
font-size: 12pt; color: black; }
td.center { text-align: center; }
select { font-family: Arial, Helvetica, Sans-Serif;
font-size: 10pt; font-weight: bold; color: blue;
background: lightBlue; }
option { font-family: Arial, Helvetica, Sans-Serif;
font-size: 10pt; color: black; background: silver; }
Thx guys!
I would suggest you learn to use a table properly. Tables are not stand alone elements, there are certain required child elements. for example
<table>
<tr>
<td>Name: </td>
<td><input type="text" name="name" /></td>
</tr>
</table>
Start with reviewing how tables work, and you'll find this much easier.
http://www.w3schools.com/html/html_tables.asp
Here you go:
Use this HTML structure: Put your label/p elements on first column, input and select elements on second column.
<tr>
<td></td>
<td></td>
</tr>
Fiddle
As far as my knowledge - at this date... this is how I would mark up this form.
I only put the id's and for="" on the first input. I hope this helps you understand a bit better. Here is a fiddle - (change the browser window to see how the form adjusts for screen sizes)
HTML
<form action="gameIntro.php" method="post" class="character-form">
<ul>
<li>
<label for="input-name">Enter your character's name:</label>
<input id="input-name" type="text" size="20" name="character_name" />
</li>
<li>
<label>Select your character class:</label>
<select name="character_class">
<option>Dwarf</option>
<option>Human</option>
<option>Elf</option>
<option>Wizard</option>
</select>
</li>
<li>
<label>Purchase health tokens:</label>
<select name="health_token">
<option>0</option>
<option>10</option>
<option>20</option>
<option>30</option>
</select>
</li>
<li>
<label>Purchase experience tokens:</label>
<select name="experience_token">
<option>0</option>
<option>2</option>
<option>4</option>
<option>6</option>
<option>8</option>
<option>10</option>
</select>
</li>
<li>
<label>Purchase supply tokens:</label>
<select name="supply_token">
<option>0</option>
<option>25</option>
<option>50</option>
<option>75</option>
<option>100</option>
</select>
</li>
</ul>
<input type="submit" value="Submit your Character" />
<input type="reset" value="Reset your Character" />
</form>
CSS
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* look it up */
}
.character-form {
border: 1px solid red;
overflow: hidden; /* should be a clearfix */
}
.character-form ul {
width: 100%;
float: left;
list-style: none;
margin: 0; padding: 0;
}
.character-form li {
width: 100%;
float: left;
margin-bottom: 1em;
border: 1px solid blue;
}
.character-form li label {
border: 1px solid orange;
}
.character-form li input, .character-form li select {
border: 1px solid green;
width: 100%;
display: block;
float: left;
float: left;
}
#media (min-width:20em) {
.character-form {
max-width: 30em;
margin-right: auto;
margin-left: auto;
}
.character-form li label {
float: none;
width: auto;
vertical-align: middle;
display: inline-block;
min-width: 15em;
}
.character-form li input, .character-form li select {
float: none;
width: auto;
display: inline-block;
vertical-align: middle;
}
.character-form li input {
width: 100%;
max-width: 20em;
}
.character-form li select {
min-width: 12em;
}
} /* end break-point */
Related
my <input type=text> are longer then <select> tags. How do I make inputs have the same width as selects?
form fieldset {
width: 50%;
margin: auto;
border: 3px solid grey;
padding: 10px;
}
form fieldset legend {
font-size: 20px;
font-weight: bold;
}
form label {
font-weight: bold;
font-size: 16px;
margin-top: 10px;
}
form input, select {
margin-bottom: 10px;
padding: 5px;
border: 0;
border-bottom: 1px solid grey;
font-size: 16px;
width: 100%;
font-family: 'Poppins';
}
form input[type=submit] {
font-size: 20px;
border: 0;
font-weight: bold;
margin-top: 10px;
}
form input:focus, select:focus {
outline: none;
border-bottom: 2px solid black;
}
form div.submit {
width: 20%;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html lang='cs'>
<head>
<meta charset='UTF-8'>
<title>Title</title>
</head>
<body>
<form method='POST' action='quotation.php?a=insert'>
<fieldset>
<legend>My legend</legend>
<label for='customer'>Customer: </label><br>
<select name='customer' id='customer'>
<option value='NULL'></option>
<option value='1'>Cust. 1</option>
<option value='2'>Cust. 2</option>
<option value='3'>Cust. 3</option>
</select><br>
<label for='contact_person'>Contact person: </label><br>
<select name='contact_person' id='contact_person'>
<option value='NULL'></option>
<option value='1'>CP 1</option>
<option value='2'>CP 2</option>
<option value='3'>CP 3</option>
</select><br>
<label for='project'>Project: </label><br>
<input type='text' name='project' id='project'><br>
<label for='part'>Part: </label><br>
<input type='text' name='part' id='part'><br>
<label for='recieved'>Recieved: </label><br>
<input type='date' name='recieved' id='recieved'><br>
<label for='deadline'>Deadline: </label><br>
<input type='date' name='deadline' id='deadline'><br>
<div class='submit'>
<input type='submit' value='Save'>
</div>
</fieldset>
</form>
</body>
</html>
Thank you for any idea.
I tried to set padding of whole fieldset:
fieldset { padding: 5px }
This is correct with tag but doesn't work with .
Then I tried to set: input {margin: 5px} but this didn't work as well. In the chrome DevTools i see that the margin is ouside of the fieldset area.
Because of padding, the border overflows the box so keep the top and bottom 5px and add 0 for right and left.
form input, select {
margin-bottom: 10px;
padding: 5px 0;
border: 0;
border-bottom: 1px solid grey;
font-size: 16px;
width: 100%;
font-family: 'Poppins';
}
Just update css style.
form input, select{
padding: 5px 0;}
I added this into CSS:
form input, select {
box-sizing: border-box;
}
This resolved my issue.
I have come across this issue and not sure of resolution. These 2 inputs should be coming in exactly the same height, however they are not. After looking at similar questions exhaustively, I've confirmed this is not due to box-sizing. Any thoughts or help would be greatly appreciated.
This is the issue in question:
.updateInput select {
width: calc(24.5% - 4px);
min-height: 1.5em;
}
select {
width: 100%;
border: 1px solid #ccc;
border-radius: 10px;
background-color: white;
margin-top: 10px;
margin-bottom: 10px;
padding: 0.5em;
font-size: 16px;
font-family: Courier, Arial, Helvetica, sans-serif;
cursor: pointer;
line-height: 14px;
min-height: 1.5em;
}
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.updateInput input[type=date] {
width: calc(24.5% - 4px);
}
input[type=number],
input[type=date] {
width: 100%;
border: 1px solid #ccc;
border-radius: 10px;
background-color: white;
margin-top: 10px;
margin-bottom: 10px;
font-size: 16px;
font-family: Courier, Arial, Helvetica, sans-serif;
cursor: pointer;
line-height: 14px;
}
input {
font: inherit;
vertical-align: middle;
padding: 0.5rem;
margin: 0;
display: inline-block;
min-height: 1.5em;
}
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
<div id="saleUpdateInput" class="updateInput">
<form id="updateInputData">
<select>
<option selected>Select product</option>
</select>
<select>
<option selected>Select sale %</option>
</select>
<input type="date">
<input type=submit value="Update">
</form>
</div>
Minimal example as requested in comments:
https://jsfiddle.net/8qexLpa3/
You will notice by default display:inline-block aligns selects to the top of the container and inputs to the bottom.
<div id="saleUpdateInput" class="updateInput">
<form id="updateInputData">
<select>
<option selected>Select product</option>
</select>
<select>
<option selected>Select sale %</option>
</select>
<input type="date">
<input type=submit value="Update">
</form>
</div>
I would recommend you use flex box to take control over this behavior.
#updateInputData {
display: flex;
}
<div id="saleUpdateInput" class="updateInput">
<form id="updateInputData">
<select>
<option selected>Select product</option>
</select>
<select>
<option selected>Select sale %</option>
</select>
<input type="date">
<input type=submit value="Update">
</form>
</div>
I have encountered issues as shown in the image when I tried to shift the form on the background image. Issues: All textboxes, dropdown list and button width cannot be changed.
Below codes are css and registration.html page.
Please do help to check the below html and css codes to help me with the issues encountered.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
justify-content: center;
align-items: center;
display: flex;
}
li {
float: left;
color: white;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 15px;
font-weight: bold;
}
li a {
display: inline-block;
color: white;
padding: 14px 16px;
text-decoration: none;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 15px;
font-weight: bold;
letter-spacing: 3px;
}
li a:hover {
background-color: #b0b0b0;
}
#logo {
width: 200px;
height: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
/* register.html & feedback.html */
/* The width cannot be changed after moving form to top left */
input[type=text],
select {
width: 21%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
#feedbkdetails {
width: 25%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
/* The width cannot be changed after moving form to top left */
input[type=number] {
width: 21%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
/* The width cannot be changed after moving form to top left */
input[type=button] {
width: 20%;
background-color: #111;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button]:hover,
input[type=submit]:hover {
background-color: #333;
}
/* Container holding the image and the text */
.container {
position: relative;
text-align: left;
color: black;
}
/* Top left text - trying to put the form to the top left but I think it works only for text
*/
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
/* CSS code for background image */
.bg-img {
opacity: 0.5;
width: 100%;
height: 100%;
background-repeat: no-repeat;
display: block;
position: relative;
background-position: 0 500px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/Ex6.css">
<img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/handstand-pose-1419568-1199014.png" id="logo">
</head>
<body>
<ul>
<li>Home</li>
<li>Register</li>
<li>Feedback</li>
</ul>
<div class="container">
<img src='https://image.shutterstock.com/image-photo/close-man-holding-weight-gym-600w-569605795.jpg' class='bg-img'>
<!-- Encounter issue shifting the form here -->
<div class="top-left">
<h2> Registration </h2>
<form action>
<label for="name">Name :</label> <br>
<input type="text" name="name" value="Enter your name"></input>
<br>
<label for="age">Age :</label> <br>
<input type="number" name="age" min="1"></input>
<br>
<label for="gender">Gender :</label> <br>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<br>
<label for="membertype">Types of membership :</label> <br>
<select name="type">
<option value="OneYr">1 Year</option>
<option value="FiveYr" selected>5 Years</option>
<option value="LifeTime">Life Time</option>
</select>
<br>
<br/>
<label for="interests">Interests :</label>
<br>
<input type="checkbox" name="interest" value="Bike"> Travel<br>
<input type="checkbox" name="interest" value="Food"> Food<br>
<input type="checkbox" name="interest" value="Shopping"> Shopping<br>
<input type="checkbox" name="interest" value="Cars"> Cars<br>
</br>
<input type="button" name="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>
Do not use img tag for background image, the container/div in which you want to have a background, put the CSS property background-image: url(../img/gym.jpg); in the stylesheet.
An image tag in HTML creates an additional element and to keep the other elements on its top, you will have to do additional styling by making it absolute.
The correct way to have image background set it in CSS.
Only change it and remove image tag from HTML.
.top-left {
background-image:url(../img/gym.jpg);
}
For using img as a background try to use background-image css instead of img tag.
For example like that
.header {
background-image: url("https://image.shutterstock.com/image-photo/close-man-holding-weight-gym-600w-569605795.jpg");
background-color: #000000;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
position: relative;
padding-top: 30px;
padding-bottom: 135px;
min-width: 1200px;
height: 100vh;
}
I'm making a form which has little images in them that is either a tick or cross. I want these to appear that they are in the text box so to do this I have added it to the form. This site is a mobile site so I want the form to be centered on what ever sized screen and the images to always be in the same place. My method at the moment feels quite messy and works on small screens unless I actually look at in on the phone then its a mess! So whats the best way to do this? Here was my stab at it
html
<div class="formContainer">
<form action="contact.php" method="post" class="ajax" id="contactForm">
<div class="input">
<input type="text" name="text" placeholder="Name" id="name">
<div class="validation">
<img src="check.svg" class="imageValidation" id="nameImage">
</div>
</div>
<div class="input">
<input type="text" name="email" placeholder="email" id="email">
<div class="validation">
<img src="check.svg" class="imageValidation" id="emailImage">
</div>
</div>
<div class="input">
<select name="subject" id ="subject">
<option value="1">Subject</option>
<option value="Private Hire">Private Hire</option>
<option value="Lost Items">Lost Items</option>
<option value="Work For Us"> Work For Us</option>
<option value="Other">Other</option>
</select>
<div class="validation">
<img src="check.svg" class="imageValidation" id="subjectImage">
</div>
</div>
<div class="input" id="message">
<textarea name="message" placeholder="Your Message"></textarea>
<div class="validation">
<img src="check.svg" class="imageValidation" id="messageImage">
</div>
</div>
<input name="robotest" type="text" id="robotest">
<div class="input">
<input type="submit" value="Submit">
</div>
</form>
<p id="emailConfrimation"> Email Sent </p>
</div>
the css:
.formContainer{
height: 90%;
width: 80%;
margin: 0 auto;
}
form{
width: 100%;
height: 100%;
text-align: center;
}
.input{
width: 100%;
height: 10%;
margin-top: 5%;
}
input{
float: left;
width: 99.9%;
height: 100%;
text-indent: 8%;
background-color: #dedede;
font-family: 'Source Sans Pro', sans-serif;
color: #3a3a3a;
font-size: 1em;
border: none;
-webkit-border-radius:0;
border-radius:0;
}
select{
float: left;
width: 99.9%;
height: 100%;
text-indent: 8%;
background-color: #dedede;
font-family: 'Source Sans Pro', sans-serif;
color: #3a3a3a;
font-size: 1em;
border: none;
-webkit-border-radius:0;
border-radius:0;
}
textarea{
float: left;
width: 98%;
height: 100%;
text-indent: 8%;
background-color: #dedede;
font-family: 'Source Sans Pro', sans-serif;
color: #3a3a3a;
font-size: 1em;
border: none;
-webkit-border-radius:0;
border-radius:0;
resize:none;
}
input[type='submit']{
margin: 0 auto;
display: block;
width: 100%;
height: 100%;
background-color: #bf3737;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-border-radius:0;
border-radius:0;
border: none;
color: #ffffff;
font-family: 'Source Sans Pro', sans-serif;
font-size: 1.5em;
}
.validation{
float: left;
width: 0.01%;
position: relative;
right: 20%;
top: 0.5em;
}
thanks!
this is the best way to put your div at the center:
#your_div {margin:0 auto;}
but if you want that your div be exactly center horizontally and vertically , you should do this:
#main_div {position:relative}
#main_div #your_div {
position:absolute;
top:50%;
margin-top:-50px; */half of your div height*/
right:50%;
margin-right:-70px; */half of your div width*/
}
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>
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>
Add Position:absolute to input button. and there is slight changes in the html code. Check the demo.
DEMO
SAMPLE CSS FORM