Attributo dinamico append con body o id

Buonasera, spero di essere abbastanza chiaro da farmi capire e riuscire a risolvere questo "semplice", per molti, problema per me.

Vengo al dunque. Nel mio sito adotto la validazione tramite jquery ma ovviamente anche via php. Ad ogni campo ho un div che appare e mi avvisa se il campo è vuoto o non corrispondente a determinate condizioni poste da me.
Il codice jquery che uso è questo:

$(document).ready(function(){

	var jVal = {

		'email' : function() {

			$('body').append('<div id="emailInfo" class="info"></div>');

			var emailInfo = $('#emailInfo');
			var ele = $('#email_rec');
			var pos = ele.offset();

			emailInfo.css({
				top: pos.top-3,
				left: pos.left+ele.width()+16
			});

			var patt = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*\s+<(\w[-._\w]*\w@\w[-._\w]*\w\.\w{2,3})>$|^(\w[-._\w]*\w@\w[-._\w]*\w\.\w{2,3})$/i;

			if(!patt.test(ele.val())) {
				jVal.errors = true;
				emailInfo.removeClass('correct').addClass('error').html('&larr; Mail usata nella registrazione').show();
				ele.removeClass('normal').addClass('wrong');
			} else {
				emailInfo.removeClass('error').addClass('correct').html('&radic;').show();
				ele.removeClass('wrong').addClass('normal');
			}

		},


		'risposta' : function() {

			$('body').append('<div id="rispostaInfo" class="info"></div>');

			var rispostaInfo = $('#rispostaInfo');
			var ele = $('#risposta_rec');
			var pos = ele.offset();

			rispostaInfo.css({
				top: pos.top-3,
				left: pos.left+ele.width()+16
			});

			if(ele.val().length == "") {
				jVal.errors = true;
				rispostaInfo.removeClass('correct').addClass('error').html('&larr; Ricordati la risposta!').show();
				ele.removeClass('normal').addClass('wrong').css({'font-weight': 'normal'});
			} else {
				rispostaInfo.removeClass('error').addClass('correct').html('&radic;').show();
				ele.removeClass('wrong').addClass('normal');
			}
		},


		'dati' : function (){
			$('body').append('<div id="datiInfo" class="info"></div>');
			var datiInfo = $('#datiInfo');
			var ele = $('#cred_pass');
			var pos = ele.offset();
			datiInfo.css({
				top: pos.top-10,
				left: pos.left+ele.width()+138
			});
			if($('input[name="dati"]:checked').length === 0) {
				jVal.errors = true;
				datiInfo.removeClass('correct').addClass('error').html('&larr; Cosa vuoi recuperare?').show();
				ele.removeClass('normal').addClass('wrong');
			} else {
				datiInfo.removeClass('error').addClass('correct').html('&radic;').show();
				ele.removeClass('wrong').addClass('normal');
			}
		},



		'sendIt' : function (){
			if(!jVal.errors) {
				$('#sendmail').change('ok');
				$('#jform').submit();
			}
		}
	};

	// ====================================================== //

	$('#send').click(function (){
		var obj = $.browser.webkit ? $('#jform') : $('html');
		obj.animate({ scrollTop: $('body').offset() }, 750, function (){
			jVal.errors = false;
			jVal.email();
			jVal.risposta();
			jVal.dati();
			jVal.sendIt();
		});
		return false;
	});
	//Qui colleghiamo il valore jVal.xxx al valore del form
	$('#email_rec').change(jVal.email);
	$('#risposta_rec').change(jVal.risposta);
	$('input[name="dati"]').change(jVal.dati);
});

Il tutto funziona bene, ma il mio problema è che se la pagina che l'utente visita viene ridimensionata, ovviamente questi div dipendendo dal body vanno fuori misura. L'ideale sarebbe che fossero "legati" ad un altro id che possa essere magari il form. Ho provato a cambiare il codice, sostituendo alla parola body semplicemente l'id del form ma senza risultato. Qualcuno saprebbe dirmi come devo fare? Sbaglio da qualche parte?

Grazie