html - How to move this button? -

html - How to move this button? -

i designing login page. need move button! how it? have attached link problem.

<form id='login' action='login.php' method='post' accept-charset='utf-8'> <fieldset > <legend>login</legend> <input type='hidden' name='submitted' id='submitted' value='1'/> <label for='username' >username:</label> <input type='text' name='username' id='username' maxlength="50" /> <br> <label for='password' >password:</label> <input type='password' name='password' id='password' maxlength="50" /> <br> <button type="submit" formmethod="post" formaction="login.php"> login </button> </fieldset> </form>

css:

/*! html5 boilerplate v4.3.0 | mit license | http://h5bp.com/ */ html, button, input, select, textarea { color: #222; } html { font-size: 1em; line-height: 1.4; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } audio, canvas, img, video { vertical-align: middle; } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } p { margin: 0px !important; } .browsehappy { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ===== initializr styles ================================================== author: jonathan verrecchia - verekia.com/initializr/responsive-template ========================================================================== */ body { font: 16px/26px helvetica, helvetica neue, arial; } .wrapper { width: 90%; margin: 0 5%; } /* =================== all: orange theme =================== */ .header-container { border-bottom: 20px solid #81addb; } .footer-container { position: absolute; bottom: 0px; width: 100%; background-color: #81addb; height: 30px; } .header-container, .main aside { background: #81addb; height: 30px; } .title { color: white; } /* ============== mobile: menu ============== */ nav ul { margin: 0; padding: 0; } nav { display: block; margin-bottom: 10px; padding: 15px 0; text-align: center; text-decoration: none; font-weight: bold; color: white; background: #81addb; } nav a:hover, nav a:visited { color: white; } nav a:hover { text-decoration: underline; } /* ============== mobile: main ============== */ .main { padding: 30px 0; } .main article h1 { font-size: 2em; } .main aside { color: white; padding: 0px 5% 10px; } .footer-container footer { color: #333; height: 20px; } /* =============== all: ie fixes =============== */ .ie7 .title { padding-top: 20px; } /* ========================================================================== author's custom styles ========================================================================== */ #login-container { border: 2px solid #efefef; width: 30%; } input { margin: 10px; float: right; position: relative; } /* ========================================================================== media queries ========================================================================== */ @media screen , (min-width: 480px) { /* ==================== intermediate: menu ==================== */ nav { float: left; width: 27%; margin: 0 1.7%; padding: 25px 2%; margin-bottom: 0; } nav li:first-child { margin-left: 0; } nav li:last-child { margin-right: 0; } /* ======================== intermediate: ie fixes ======================== */ nav ul li { display: inline; } .oldie nav { margin: 0 0.7%; } } @media screen , (min-width: 768px) { /* ==================== wide: css3 effects ==================== */ .header-container, .main aside { -webkit-box-shadow: 0 5px 10px #aaa; -moz-box-shadow: 0 5px 10px #aaa; box-shadow: 0 5px 10px #aaa; } /* ============ wide: menu ============ */ .title { float: left; } nav { float: right; width: 38%; } /* ============ wide: main ============ */ .main article { float: left; width: 57%; } .main aside { float: right; width: 28%; } } @media screen , (min-width: 1140px) { /* =============== maximal width =============== */ .wrapper { width: 1026px; /* 1140px - 10% margins */ margin: 0 auto; } } /* ========================================================================== helper classes ========================================================================== */ .ir { background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 150%; } .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* ========================================================================== print styles ========================================================================== */ @media print { * { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }

stupid editor requirements!!! ignore following! lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled create type specimen book. has survived not 5 centuries, jump electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum.

i have created fiddle here:

http://jsfiddle.net/nl4ka/2/

without changing html, added next css:

i added width input , label , made them float either on left labels , right input tags in order fill each form's row , maintain them separated

#login input { margin: 10px 0; float: right; width: 60%; } #login label { width: 25%; float: left; clear: left; margin: 8px; }

and applied float right login button , of import one, clear left.

#login button { clear: left; float: right; }

html css html5 css3