Create CSS Post Comment Design Form

Create CSS Post Comment Design Form














CSS

<style>
#main{
float:left;
display:inline;
width:567px;
margin-left:50px;
position:relative;
}
form{
margin:1em 0;
border:none;
background:#dfeced;
border:5px solid #c9dfe1;
padding:1em 15px;
}
label{
float:left;
clear:both;
width:105px;
margin-right:20px;
margin-top:5px;
text-align:right;
}
input, textarea{
width:350px;
border:1px solid #ccc;
padding:5px;
vertical-align:middle;
margin:0;
}
textarea{
height:180px;
overflow:auto;
}  
form p{
clear:both;
margin:0;
padding:.25em 0;
} 
button{
border:none;
width:123px;
height:43px;
line-height:43px;
text-align:center;
padding:0;
margin:0;
background:url(images/bg_button.gif) no-repeat 0 0;
color:#fff;
font-weight:bold;
font-size:14px;
cursor:pointer;
vertical-align:middle;
}        
.submit{
height:52px;
margin-left:125px; 
}
</style>

HTML Form

<div id="main">
<h3>Post your comment</h3>
<form id="commentForm" action="/" method="post"> 
  <p>
   <label for="name">Name</label>
   <input type="text" name="name" id="name" size="30" />
  </p>
  <p>
   <label for="email">Email</label>
   <input type="text" name="email" id="email" size="30" />
  </p>
  <p>
   <label for="web">Website</label>
   <input type="text" name="web" id="web" size="30" />
  </p>               
  <p>
   <label for="comment">Comment</label>
   <textarea name="comment" id="comment" rows="10" cols="30"></textarea>
  </p>    
  <p class="submit">
   <button type="submit">Send</button>
  </p> 
</form>
</div>

Demo

http://dl.dropbox.com/u/3293191/r-ednalan/css_post_comment_form.html