CSSの問題：Javascriptパスワード検証メッセージの配置エラー

Question

私はthis link for password match validationを使用しています。 すべては非常にうまく動作しています。しかし、問題は、確認パスワードフィールドの横のフィールドではなく、フィールドの上にメッセージが表示されていることです。ここで私が試したこと;

JavaScript関数

function checkPass(){ 
    var password = document.getElementById('password'); 
    var password2 = document.getElementById('password2');    
    var message = document.getElementById('confirmMessage'); 
    var goodColor = "#66cc66"; 
    var badColor = "#ff6666"; 

    if(password.value == password2.value){ 
     password2.style.backgroundColor = goodColor; 
     message.style.color = goodColor; 
     message.innerHTML = 'Passwords Match!'    
    }else{ 
     //The passwords do not match. 
     //Set the color to the bad color and 
     //notify the user. 
     password2.style.backgroundColor = badColor; 
     message.style.color = badColor; 
     message.innerHTML = 'Passwords Do Not Match!' 
    } 
} 

HTML

<div id="wrapper"> 
    <form name="form" id="form" class="form" onsubmit="someFunction(this);return false"> 
     <label for="password">Password:</label><input type="password" style="color: #B8B894;" value="Password" onblur="if(this.value == '') { this.value='Password'}" onfocus="if (this.value == 'Password') {this.value=''}" name="password" id="password" /> 
     <label for="password2">Confirm Pass:</label><input type="password" name="password2" id="password2" onkeyup="checkPass(); return false;" /> 
     <span id="confirmMessage" class="confirmMessage"></span><br/> 
     <input type="submit" value="Submit" class="submit" /> 
     <input type="button" name="reset_form" value="Reset All Fields " onclick="this.form.reset();"> 
    </form> 
</div> 

CSS

<style type="text/css"> 
    #wrapper {width:75%; margin:70px auto} 
    .form {float:left; padding:0 139px 10px 10px; background:#f3f3f3; border:2px solid #cfcfcf width: 100%;} 
    .form label {float:left; width:100px; padding:10px 10px 0 0; font-weight:bold font:12px Verdana, Arial, Helvetica, sans-serif; color:#666} 
    .form select {float:left; width:146px; margin-top:10px} 
    .form input {float:left; margin-top:10px} 
    .form .submit {clear:both} 
    .form #confirmMessage {font-size: 0.9em; margin:5px; padding:10px 10px;} 
    .form input.password {font:normal normal normal 1em verdana,arial,sans-serif; padding:4px 6px 3px 6px; border:1px solid #ccc; border-top-color:#aaa; border-bottom-color:#ddd; cursor:text; width:286px; -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.1); -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);} 
    #msg {display:none; position:absolute; z-index:200; background:url(images/msg_arrow.gif) left center no-repeat; padding-left:7px} 
    #msgcontent {display:block; background:#f3e6e6; border:3px solid #924949; border-left:none; padding:5px; min-width:150px; max-width:250px} 
</style> 

結果は次のようにレンダリングされます下の画像。

これはどのように解決できますか？

EDIT：私はCSSの#wrapperを質問に入れています。私は今質問に追加しました。

EDIT＃2：私は<style>タグの間にすべてを入れました。親切に助けてください。

Answer 1

あなたは今すべて左に浮いているので、スパンはどこに行かなければならないのか分かりません。
コードから取得したページのコードを使用した場合、これは起こりませんでした。

とにかく、浮動小数点数のいくつかとあなたのCSSでいくつかのエラーが取り除かれました。このようになりました。

#wrapper {width:75%; margin:70px auto} 
.form {padding:0 10px 10px 10px; background:#f3f3f3; border:2px solid #cfcfcf;} 
.form label {display:inline-block; width:100px; margin:10px 0; 
    font:bold 12px Verdana, Arial, Helvetica, sans-serif; color:#666} 
.form select {float:left; width:146px; margin-top:10px} 
.form .submit {clear:both} 
.form #confirmMessage {font-size: 0.9em;} 

私も最初input後<br>を追加しました。結果はthis jsFiddleです。