Here I made two simple input fields, but when I zoom in and zoom out on the page (Ctrl + Mouse wheel) somehow the input fields change places, input goes down and up, why it is doing this? How to have them at the same place whether I zoom in or out?
body {
width: 870px;
}
#col3 {
width: 400px;
float: left;
/*background-color:#383838;*/
margin: 20px 10px 10px 30px;
}
form {
width: 380px;
margin: auto;
padding: 5px;
border: solid 1px white;
}
fieldset {
margin: auto;
border: solid 1px #E37222;
padding-left: 19px;
padding-top: 15px;
background-color: #EEEEDD;
}
label {
display: block;
width: 70px;
float: left;
margin-left: 10px;
}
span {
margin-left: -16px;
}
legend {
background-color: #E37222;
color: white;
}
input.tt {
outline: 1px solid #909090;
}
.tt {
margin-top: 8px;
}
<div id="col3">
<form>
<fieldset>
<legend>eeeee</legend>
<label for="name">
<span>rrr:</span>
</label>
<input class="tt" type="text" size="34" />
<br />
<label class="tt" for="email">
<span>ttt:</span>
</label>
<input class="tt" type="text" size="34" />
</fieldset>
</form>
</div>
..........................
Remove float:left for <label>
label{
display:block;
width:70px;
margin-left:10px;
}
Try with This
.youclassname{
display:flex;
}
<div class="yourclassname">
<label for="name"><span>rrrrrr rrrrrr:</span></label>
<input class="tt type="text" size="34" />
</div>
Either change your markup a little like that, or use flexbox/grid.
<style>
body{
width:870px;
}
#col3{
width:400px;
float:left;
/*background-color:#383838;*/
margin:20px 10px 10px 30px;
}
form{
width:380px;
margin:auto;
padding:5px;
border:solid 1px white;
}
fieldset{
margin:auto;
border:solid 1px #E37222;
padding-left: 19px;
padding-top: 15px;
background-color: #EEEEDD;
}
label{
display:block;
width: 100%;
}
label div{
padding-right: 5px;
width: 68px;
display: inline-block;
}
legend{
background-color:#E37222;
color:white;
}
input.tt{
outline: 1px solid #909090;
}
.tt{
margin-top:8px;
}
</style>
</head>
<body>
<div id="col3">
<form ">
<fieldset >
<legend>eeeee</legend>
<label for="name"><div>rrr:</div><input class="tt type="text" size="34" /> </label>
<br/>
<label class="tt"for="email"><div>ttt:</div><input class="tt" type="text" size="34" /></label>
</fieldset>
</form>
</div>
</body>
Related
I have a form validation using the html5, but when the form is inside a certain div, the validation doesnt work.
The div:
div class="slide story" id="slide-6" data-slide="6">
...
</div>
If the form is out of this div it works fine! But when this div surround the form the validation doens't work.
The Css:
#slide-6 {
background-color: #00387F;
color: #e4e6e5;
padding-bottom: 350px;
padding-top: 90px;
}
.contact-info .contact-content{
margin-bottom: 30px;
}
.contact-info p{
margin-bottom: 20px;
}
.contact-info p i{
font-size: 16px;
margin-right: 10px;
}
.contact-form{}
.contact-form input[type="text"],
.contact-form input[type="email"]{
border: 1px solid #E8E8E8;
padding: 8px 14px;
width: 100%;
margin-bottom: 20px;
}
.contact-form textarea{
border: 1px solid #E8E8E8;
padding: 8px 14px;
width: 100%;
margin-bottom: 20px;
}
#media (max-width: 767px) {
#slide-6 {
background-image: none;
}
}
#slide-6 .line-row .hr {
background-color: #FFFFFF;
color: #FFFFFF;
}
#slide-6 a {
color: inherit;
outline: none;
text-decoration: none;
}
#media (max-width: 767px) {
.with-hover-text{
margin-bottom: 2em;
margin-top: 1em;
}
}
#contact-row-4 {
padding-top: 125px;
}
#contact-row-4 .col-12 {
height: 175px;
overflow: hidden;
padding-top: 20px;
transition: all ease-in .5s;
}
#contact-row-4 img {
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
#contact-row-4 .col-12:hover {
height: 175px;
padding-top: 0;
}
#contact-row-4 .col-12 .hover-text {
display: none;
font-size: 20px;
}
The form:
<div class="slide story" id="slide-6" data-slide="6">
<div class="col-sm-7 col-sm-offset-1">
<form action="php/send-contact.php" class="contact-form" name="contact-form" method="post">
<div class="row">
<div class="col-sm-6">
<input type="text" name="name" required="required" placeholder="Name*">
</div>
<div class="col-sm-6">
<input type="email" name="email" required="required" placeholder="Email*">
</div>
<div class="col-sm-6">
<input type="text" name="subject" placeholder="Subject">
</div>
<div class="col-sm-6">
<input type="text" name="website" placeholder="Website">
</div>
<div class="col-sm-12">
<textarea name="message" required="required" cols="30" rows="7" placeholder="Message*"></textarea>
</div>
<div class="col-sm-12">
<input type="submit" name="submit" value="Send Message" class="btn btn-send">
</div>
</div>
</form>
</div>
</div>
Can you please help me?
I need to do mobile version of this page.(code below) But I receive the result such as on screenshot see my mobile version What i have do?
P.S. if not difficult couple of words about the html structure and css (I just started to learn how to make websites)
.row-wrap-left,
.row-wrap-right,
.row-wrap-bottom,
.field-wrap {
float: none;
width: 100%;
}
.request-input {
width: 90%;
}
textarea {
width: 98%;
}
.button-submit {
float: none;
width: 100%;
margin-bottom: 20px;
}
.button-cancel {
float: none;
width: 100%;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
body {
background: #282828;
font-family: 'Montserrat', sans-serif;
}
.container {
background: #27292b;
max-width: 636px;
}
.request {
text-align: left;
position: relative;
overflow: hidden;
}
.wrapper {
padding: 36px 85px 60px 85px;
}
.row-wrap-left {
float: left;
width: 50%;
overflow: hidden;
}
.row-wrap-right {
float: right;
width: 50%;
overflow: hidden;
}
.row-wrap-right .field-wrap {
float: right;
}
.row-wrap-bottom {
float: left;
width: 100%;
overflow: hidden;
}
.field-wrap {
position: relative;
}
form {
overflow: hidden;
}
.request-head h1 {
font-size: 29px;
text-transform: uppercase;
color: #fff;
padding-bottom: 25px;
border-bottom: solid 1px #47494b;
margin-bottom: 36px;
}
.request-input {
width: 195px;
height: 12px;
font-size: 18px;
padding: 14px;
background: none;
border: 1px solid #47494b;
border-radius: 2px;
margin-top: 17px;
margin-bottom: 44px;
}
.request-country,
.request-code {
width: 33px;
}
.request-number {
width: 58px;
}
.request-input:focus,
textarea:focus {
outline: none;
color: #fff;
border-color: #fff;
}
.request-input:focus ~ label,
.request-input:focus + span,
textarea:focus + label {
color: #fff;
}
.field-wrap label {
color: #434546;
font-size: 13px;
display: block;
position: absolute;
top: 0;
}
.field-wrap .icon {
position: absolute;
top: 30px;
margin-left: -40px;
padding-left: 10px;
color: #434546;
}
textarea {
width: 460px;
height: 150px;
font-size: 18px;
background: none;
border: 1px solid #47494b;
border-radius: 2px;
margin-top: 17px;
margin-bottom: 28px;
}
p {
font-size: 13px;
color: #434546;
}
a {
font-size: 13px;
text-decoration: none;
color: #fff;
}
.agreement {
margin-bottom: 30px;
}
.button-submit {
background: #5d9f81;
color: #fff;
border: none;
padding: 14px 44px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
border-radius: 2px;
margin-right: 18px;
}
.button-cancel {
background: none;
color: #434546;
border: 1px solid #47494b;
padding: 14px 44px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
border-radius: 2px;
}
.button-submit:hover {
background: #4c876c;
color: #fff;
cursor: pointer;
}
.button-cancel:hover {
background: #5d9f81;
color: #fff;
cursor: pointer;
}
input:focus:invalid,
textarea:focus:invalid {
border: 1px solid #e7635e;
}
input:focus:invalid ~ label {
color: #da5f5b;
}
input:focus:invalid + span {
color: #da5f5b;
}
textarea:focus:invalid + label {
color: #da5f5b;
}
input:required:valid,
textarea:required:valid {
border: 1px solid #6abd97;
color: #6abd97;
}
input:required:valid + label,
textarea:required:valid + label{
color: #6abd97;
}
input:required:valid ~ label {
color: #6abd97;
}
input:required:valid + span {
color: #6abd97;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Register form</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/small.css" media="(max-width:600px)">
</head>
<body>
<div class="container clearfix">
<div class="wrapper clearfix">
<div class="request clearfix">
<div class="request-head">
<h1>Request a demo</h1>
</div>
<form action="/" method="post">
<div class="row-wrap-left">
<div class="field-wrap">
<input type="text" name="form_data[first_name]" id="fname" class="request-input request-fname" required autocomplete="off">
<label for="fname">First Name</label>
</div>
<div class="field-wrap">
<input type="email" name="form_data[email]" id="email" class="request-input request-email" required autocomplete="off">
<label for="email">Email *</label>
</div>
<div class="field-wrap">
<input type="text" name="form_data[school_organization]" id="school-org" class="request-input request-school" required autocomplete="off">
<span class="icon"><i class="fa fa-search"></i></span>
<label for="school-org">School/Organization *</label>
</div>
</div>
<div class="row-wrap-right">
<div class="field-wrap">
<input type="text" name="form_data[last_name]" id="lname" class="request-input request-lname" required autocomplete="off">
<label for="lname">Last Name</label>
</div>
<div class="field-wrap">
<input type="tel" name="form_data[phone][country]" id="tel" class="request-input request-country" required autocomplete="off" pattern="[0-9]{3}">
<input type="tel" name="form_data[phone][code]" id="tel" class="request-input request-code" required autocomplete="off" pattern="[0-9]{2}">
<input type="tel" name="form_data[phone][number]" id="tel" class="request-input request-number" required autocomplete="off" pattern="[0-9]{7}">
<label for="tel">Phone Number</label>
</div>
<div class="field-wrap">
<input type="text" name="form_data[role]" id="role" class="request-input request-role" required autocomplete="off">
<label for="role">Role on Campus *</label>
</div>
</div>
<div class="row-wrap-bottom">
<div class="field-wrap">
<textarea name="form_data[goals]" id="goals" class="label-goals" required autocomplete="off"></textarea>
<label for="goals">What are your goals for DemoSystem? *</label>
</div>
<p class="agreement">
<input type="checkbox" name="checkbox" id="checkbox" checked>
<label for="checkbox">
I agree to the DemoSystem
<span>
Terms of Service
</span>
and
<span>
Privacy Policy
</span>
</label>
</p>
<div class="field-wrap">
<button class="button-submit">Submit</button>
<button class="button-cancel">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
You can use media query in your css.
Media query allowed you to change css depending on the screen size.
#media screen and (max-width: 750px) {
/* your new Css here */
}
Right after the max-width parametre you put the desired width.
If the max-width parameter is set to 750px the code will be active whenever the screen size is bellow 750px.
Then you can put all the existing css selector already used for higher screen and make them have new value.
Put the media query code at the bottom of you css style sheet.
You can use several media query in the same code.
Example:
#media screen and (max-width: 1150px) {
/* your new Css for tablet here */
}
#media screen and (max-width: 750px) {
/* your new Css for smart phone here */
}
Also it's strongly advise to add the code below on the head of your html code
<meta name="viewport" content="width=device-width, initial-scale=1">
Feel free to ask if needed.
In the small css you have to specify a new width for input #id:
#tel{
width:25%;
}
Result: jsfiddle
html
div class="main">
<div class="one">
<div class="register">
<h3>Create your account</h3>
<form id="reg-form">
<div>
<div>
<label for="username">Username</label>
<input type="text" id="username" spellcheck="false" placeholder="User Name" />
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" />
</div>
<div>
<label></label>
<input type="submit" value="Shop Login" id="create-account" class="button"/>
</div>
</form>
</div>
</div></div>
<div class="two">
<div class="register">
<h3>Create your account</h3>
<form id="reg-form1">
<div>
<label for="name1">Name</label>
<input type="text" id="name1" spellcheck="false" placeholder="Enter Your Name"/>
</div>
<div>
<label for="email1">Email</label>
<input type="text" id="email1" spellcheck="false" placeholder="mymail#mail.com"/>
</div>
<div>
<label for="username1">Username</label>
<input type="text" id="username1" spellcheck="false" placeholder="User Name" />
</div>
<div class="textarea">
<label for="address">Shipping Address</label>
<textarea name="address"cols="35" rows="4"></textarea>
</div>
<div>
<label for="password1">Password</label>
<input type="password" id="password1" />
</div>
<div>
<label for="password-again1">Password Again</label>
<input type="password" id="password-again1" />
</div>
<div>
<label></label>
<input type="submit" value="Create Account" id="create-account1" class="button"/>
</div>
</form>
</div>
</div>
</div>
CSS
.main > div {
display: inline-block;
width: 49%;
margin-top: 20px;
}
.two .register {
border: none;
}
.two .register h3 {
border-bottom-color: #909090;
}
.two .register .sep {
border-color: #909090;
}
.register {
width: 400px;
margin: 10px auto;
padding: 10px;
border: 7px solid #ADD8E6;
border-radius: 10px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
background-color: #f0f0f0;
box-shadow: 0 0 20px 0 #000000;
}
.register h3 {
margin: 0 15px 20px;
border-bottom: 2px solid #72b372;
padding: 5px 10px 5px 0;
font-size: 1.1em;
}
.register div {
margin: 0 0 15px 0;
border: none;
}
.register label {
display: inline-block;
width: 25%;
text-align: right;
margin: 10px;
}
.register input[type=text], .register input[type=password] {
width: 65%;
font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif;
padding: 5px;
font-size: 0.9em;
border-radius: 5px;
background: rgba(0, 0, 0, 0.07);
}
.register input[type=text]:focus, .register input[type=password]:focus {
background: #FFFFFF;
}
.register textarea{
width: 65%;
font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif;
padding: 5px;
font-size: 0.9em;
border-radius: 5px;
background: rgba(0, 0, 0, 0.07);
}
.register .button {
font-size: 1em;
border-radius: 8px;
padding: 10px;
border: 1px solid #ADD8E6;
box-shadow: 0 1px 0 0 #05B8CC inset;
background: #05B8CC;
background: -webkit-linear-gradient(#ADD8E6, #05B8CC);
background: -moz-linear-gradient(#ADD8E6, #05B8CC);
background: -o-linear-gradient(#ADD8E6, #05B8CC);
background: linear-gradient(#ADD8E6, #05B8CC);
}
.register .button:hover {
background: #51db1c;
background: -webkit-linear-gradient(#51db1c, #6ba061);
background: -moz-linear-gradient(#51db1c, #6ba061);
background: -o-linear-gradient(#51db1c, #6ba061);
background: linear-gradient(#51db1c, #6ba061);
}
.register .sep {
border: 1px solid #72b372;
position: relative;
margin: 35px 20px;
}
.register .or {
position: absolute;
width: 50px;
left: 50%;
background: #f0f0f0;
text-align: center;
margin: -10px 0 0 -25px;
line-height: 20px;
}
.register .connect {
width: 400px;
margin: 0 auto;
text-align: center;
}
div.one {position: relative; top: -165px}
The css is working fine, except that the label for text area is displaying at bottom.
How can I display the text area label at center position of the text area ?? Thanks in advance.
Here is a link to Fiddle Demo
Add the following css rule:
div.textarea > * {
vertical-align:middle
}
Add following css in your code
.register label, .register textarea{
vertical-align:middle
}
I have a <a> tag with border: 1px solid #CCC; border-bottom:none; style and it's leaves a tiny gap, please look at the codepen result to see what I mean. This gap appears left from login tab if the login tab is active or right from register tab if register tab is active.
HTML:
<div id="w-login">
<div id="login">
<menu id="tabs"> <a id="tab-signin" class="tab-active"><i class="fa fa-unlock-alt"></i>Login</a><a id="tab-signup"><i class="fa fa-lock"></i>Register</a>
</menu>
<div id="signin">
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="control-label col-1">Username:</label>
<input type="text" name="username" class="form-control col-2" id="si-username">
</div>
<div class="form-group">
<label for="password" class="control-label col-1">Password:</label>
<input type="password" name="password" class="form-control col-2" id="si-password">
</div>
<input type="submit" value="Login" class="btn btn-primary" id="si-submit">
</form>
</div>
<div id="signup">
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="control-label col-1">Username:</label>
<input type="text" name="username" class="form-control col-2" id="su-username">
</div>
<div class="form-group">
<label for="password" class="control-label col-1">Password:</label>
<input type="password" name="password" class="form-control col-2" id="su-password">
</div>
<div class="form-group">
<label for="email" class="control-label col-1">Email:</label>
<input type="text" name="email" class="form-control col-2" id="su-email">
</div>
<input type="submit" value="Register" class="btn btn-primary" id="su-submit">
</form>
</div>
</div>
</div>
CSS:
#container {
height: 100%;
width: 100%;
text-align: center;
font-size: 14px;
}
#container:before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -3px;
}
#w-login {
display: inline-block;
vertical-align: middle;
width: 40%;
padding: 5px;
}
#login {
}
#signin, #signup {
border: 1px solid #CCC;
border-top: none;
padding: 20px 10px;
border-bottom-left-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-moz-border-bottom-right-radius: 15px;
}
#signup {
display: none;
}
#tabs {
padding: 0;
margin: 0;
border: 1px solid #CCC;
border-top-left-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-top-left-radius: 15px;
border-top-right-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-top-right-radius: 15px;
border-bottom: none;
}
#tabs a {
padding: 10px 0;
display: inline-block;
width: 50%;
cursor: pointer;
text-decoration: none;
}
#tabs .tab-active {
}
#tab-signin.tab-active {
border: 1px solid #CCC;
border-width: 0 1px 1px 0;
}
#tab-signup.tab-active {
border: 1px solid #CCC;
border-width: 0 0 1px 1px;
}
.col-1 {
width: 28%;
}
.col-2 {
width: 70%;
display: inline-block;
}
.form-horizontal .form-group {
margin-right: 0;
margin-left: 0;
}
.btn {
width: 99%;
}
.fa {
padding-right: 5px;
}
Note: the rest of the CSS styles come from Bootstrap
JS/jQuery:
$(function(){
$('#tab-signin').click(function(){
$('#signup').hide();
$('#signin').show();
switchTab();
});
$('#tab-signup').click(function(){
$('#signin').hide();
$('#signup').show();
switchTab();
});
});
function switchTab(){
$('#tabs a').toggleClass('tab-active');
}
I suggest the following approach.
I would take advantage of the fact that in your mark-up the two tab elements,
#tab-signin and #tab-signup, are children of the menu#tabs element.
That being the case, I would place the left, top and right borders on the #tabs element
and remove the left/top and top/right borders on the two children elements (#tab-signin and #tab-signup respectively).
The CSS for #tabs would look like:
#tabs{
padding: 0;
margin: 0;
border: 1px solid #CCC;
border-top-left-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-top-left-radius: 15px;
border-top-right-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-top-right-radius: 15px;
border-bottom: none;
}
To style the .tab-active cases, I would create two specific rules for the sign-in and the sign-up tabs, for the right/bottom and the bottom/left borders respectively:
#tabs .tab-active{
}
#tab-signin.tab-active{
border: 1px solid #CCC;
border-width: 0 1px 1px 0;
}
#tab-signup.tab-active{
border: 1px solid #CCC;
border-width: 0 0 1px 1px;
}
See demo at: http://jsfiddle.net/audetwebdesign/By4g5/
The problem you noticed earlier is not really a browser bug. The CSS specification does not specify exactly how browsers are to draw the corners of borders (the joints), so you are at the mercy of the browser for that particular design detail.
My approach is to avoid the problem by taking full advantage of the HTML mark-up in your code.
You should probably try floats but a quick fix could be negative margins...
#tabs{
padding: 0;
margin: 0px 0px -1px 0px;
}
DEMO
EDIT: inline blocks side effects, something to read ;)
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Another solution would be if set a transparent border on class .tab-active.
just using border transparent .
#tabs .tab-active{
border-bottom: 1px solid transparent;
}
Chec the DEMO.
Question:
I'm trying to adapt the comment box from this site
http://www.mentby.com/Group/mono-aspnet-list/input-data-cannot-be-coded-as-a-valid-certificate.html
to my site.
I have successfully copied it, but I want to vertical-align the labels in the center.
It's working, but for some odd reason not for the last one.
Can anybody tell me what I am doing wrong / what I am missing ?
Obviously, it has something to do with textarea.
Here is what I have:
<!DOCTYPE html>
<html>
<head>
<title>Comment</title>
<style type="text/css" media="all">
label
{
cursor: text;
}
#commentForm
{
/*width: 80%;*/
width: 500px;
margin-top: 10px;
padding-bottom: 10px;
background-color: #f6f6f6;
border-right: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
border-left: 1px solid #e1e1e1;
}
#commentForm div.rowHolder
{
margin-bottom: 5px;
/*float: left;*/
}
.commentFormLabel
{
background: #efefef url(separator.gif) repeat-x top;
padding: 2px 10px 2px 10px;
margin: 0 0 20px 0;
border-bottom: 1px solid #e1e1e1;
font: bold 13pt "sans-serif", arial, verdana;
letter-spacing: -1px;
line-height: 16pt;
color: #000;
}
#commentForm label
{
display: inline-block;
width: 100px;
padding-right: 10px;
text-align: right;
/*float: left;
vertical-align: middle;
*/
font-family: "sans-serif", arial, verdana;
font-size: 9pt;
color: #333;
}
#commentForm input, #commentForm textarea
{
width: 314px;
/*float: left;*/
border: 1px solid #e7e7e7;
padding: 2px;
}
#commentForm .lblVertAlign
{
display: table-cell; vertical-align: middle;
/*background-color: Red;*/
}
</style>
</head>
<body>
<div id="commentForm">
<div class="commentFormLabel">Post a Comment</div>
<div class="formHolder">
<div class="rowHolder">
<div class="lblVertAlign">
<!--
<span style="vertical-algin: middle;">Name</span>
-->
<label for="name">Name</label>
<input id="name" name="name" value="" />
</div>
</div>
<div class="rowHolder">
<div class="lblVertAlign">
<label for="email">Email</label>
<input id="email" name="email" value="" />
</div>
</div>
<div class="rowHolder">
<div class="lblVertAlign">
<label for="website">Website</label>
<input id="website" name="website" value="http://" />
</div>
</div>
<div class="rowHolder" style="padding: 0px; margin: 0px;">
<div class="lblVertAlign">
<label for="comment">Comment</label>
<textarea id="message" name="message"></textarea>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You need to modify the vertical-align of the input elements:
http://jsfiddle.net/7VstA/2/
#commentForm input, #commentForm textarea
{
width: 314px;
/*float: left;*/
border: 1px solid #e7e7e7;
padding: 2px;
vertical-align: middle;
}