Question

I have a webpage which initially looks like this.

When clicked upon a link, a small form appears to the right side of the page.

The problem is when that happens that line which reads Record added also moves to the middle.

These are the CSS rules I’ve written to position them.

#frmAddService { float:right; padding-right:250px; padding-top:150px; }   //the form

#msg { float:right; padding-right:250px; padding-top:300px; }   //the 'Record Added' line

How can I make that line’s position fixed when the form appears?

Thank you.

Answer 1

Cool thank for the link, that help 🙂

I created a new div and add your form and your msg in it. that way, if one move both move.
And I put the id, formContainer.

here is the CSS

#formContainer{width:350px; float:right;padding-right:250px;}
#frmAddService {position: relative; float:right;padding-top:300px;}

#msg { position:relative; float:right; padding-top:300px; }

#tasks { float:left; padding-left:40px; padding-top:100px; }​

I also moddify your Jquery to change the value of your #msg

$(function()
{
    $("#frmAddService").hide();

    $("#add").click(function()
    {
        $("#frmAddService").fadeIn("slow");
        $("#msg").css("padding-top","0px");
        $("#msg").css("margin-top","10px");
        $("#msg").css("padding-right","100px");
        return false;
    });
});

and this mostly it as you can see in http://jsfiddle.net/PJVu6/29/ it work fine.

​