CSS 문제 : 자바 스크립트 비밀번호 확인 메시지 배치 오류

Question

this link for password match validation을 사용하고 있습니다. 모두 잘 작동합니다. 그러나 문제는 암호 확인 필드 옆의 필드가 아니라 필드 상단에 메시지가 표시된다는 것입니다. 여기 내가 시도한 것;

자바 스크립트 기능

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> 

결과는 같은 렌더링됩니다 아래 이미지;

어떻게 해결할 수 있습니까?

편집 : 나는 CSS에 내 질문에 #wrapper를 넣는 것을 잊어 버렸다. 나는 내 질문에 지금 추가했다.

편집 # 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입니다.