javascript - Horizontally placed submit button and proper alignment of error messages -

javascript - Horizontally placed submit button and proper alignment of error messages -

i'm trying align yes , no buttons horizontally , in centre of notification. also, want align title , description above yes , no buttons in centre of notification.

here jsfiddle of below:

class="snippet-code-js lang-js prettyprint-override">$(document).ready(function() { $("#form").validate({ rules: { time: { required: true, number: true }, title: "required" }, messages: { time: "please come in time(digit) in seconds", title: "please come in title" } }); $("#notify3").hide(); $("#c").click(function(e) { if ($('#form').valid()) { $("#notify3").slidedown(); var timeout = parseint($("#time").val()) * 1000; var str = $("#title").val(); var str1 = $('#desc').val(); $('.message').append(str, "</br>", str1); settimeout(function() { $("#notify3").slideup(); }, timeout); } homecoming false; }); $("#yes").click(function(e) { $("#notify3").slideup(); $(".cy").slidedown(500).delay(1000).slideup(500); }); $("#no").click(function(e) { $("#notify3").slideup(); $(".cn").slidedown(500).delay(1000).slideup(500); }); }); class="snippet-code-css lang-css prettyprint-override">#notify3 { width: 40%; position: absolute; top: 50%; left: 30%; height: 85px; background: #cccccc; opacity: 0.8; display: none; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-style: solid; border-color: black; } #confirm { width: 20%; position: absolute; top: 0; left: 40%; height: 50px; background: #ffff00; opacity: 0.5; display: none; } .message { font-size: 20px; width: 100%; text-align: center; padding: 10px; } .message .y, .n { bottom: 0; right: 0; } #form .formelement { display: inline-block; padding: 10px 10px; width: 900px; } #form .formelement label { float: left; text-align: left; width: 110px; } #form .formelement label.error { color: red; display: inline-block; margin: 4px 0 10px 100px; padding: 0; text-align: left; width: 900px; } class="snippet-code-html lang-html prettyprint-override"><div id="confirm" class="cy"> <h3 style="text-align:center;">approved</h2></div> <div id="confirm" class="cn"><h3 style="text-align:center;">reject</h2></div> <div id="notify3"> <div class="message"> <div class="y"><input type="submit" class="submit" value="yes" id="yes"/> <input type="submit" class="submit" value="no" id="no"/> </div> </div> </div> <fieldset> <form action="" id="form" > <div class="formelement"> <label for="time">time(in sec)* : </label> <input type="text" name="time" id="time"/> </div> <div class="formelement"> <label for="title">title* : </label> <input type="text" name="title" id="title"/> </div> <div class="formelement"> <label for="desc">description : </label> <input type="text" name="desc" id="desc"/> </div> <div class="formelement"> <input type="submit" value="confirm" class="submit" id="c"/> </div> </form> </fieldset> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script> <script src="valid.js"></script>

please, @ js fiddle here. hope help you. using class message.

<div class="cnfmsg"></div>

http://jsfiddle.net/fwsk1rq4/8/

new fiddle: http://jsfiddle.net/fwsk1rq4/10/

javascript jquery html css