Проблема с 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: Я забыл задать свой вопрос #wrapper в CSS. Я добавил теперь в свой вопрос.

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;} 

Я также добавил <br> после первого input. И результат похож на this jsFiddle.