Relatively aligning element in a div with fix width and height - css

Question

My markup looks like this:
<div id="content">
<img src="some_content.jpg">
<form action="...">
<input type="text" ... >
<input type="submit" ...>
</form>
<div id="forgotyourpassword">
Forgot your password?
</div>
</div>
The mark up for the form is generated by a CMS, so I cannot change it.
The content div has a fixed width and height so that I can center it vertically and horizontally in the page. Currently all children within content is set to display: inline-block and then aligned horizontally and vertically within the content div.
I have aligned the forgot your password link like this:
And here is the css for the link in question:
#forgot-password{
float: right;
margin: 0; /* reset some stuff inherited from parent */
padding: 0; /* reset some stuff inherited from parent */
margin-right: 171px;
margin-top: -20px;
}
Here are some relevant css:
#content{
position:absolute;
width: 650px;
left:50%;
top:50%;
height:242px;
margin-top:-126px;
margin-left: -325px;
text-align: center;
}
#content > *{
vertical-align: middle;
display: inline-block;
zoom:1;
*display:inline;
margin-left: 20px;
margin-right: 20px;
}
That all works well. However, in some cases, for example, if an error has occurred with the form submission, then an error message will be appended to the from in the <form> element by the backend.
In such a case, I want the link to be aligned like so:
The problem with my css as it stands is that the forgot password link is aligned from the bottom of its parent (content). I need to align it relative to the button.
My initial idea was that I will align the forgotyourpassword div straight under the form. Thus, if the size of the form changes when the error messages are added, the forgotyourpassword link will be pushed downwards.
I can then set margin-top to a negative amount of pixels which should then push my forgotyourpassword div back up x pixels, which will then align the element with the submit button no matter how tall the form has become.
I am finding that this is not the case:
In firefox 10, the forgotyourpassword div does not seem to get "pushed up" by a the amount of pixels I have defined once it overlaps with the content area of the form.
In IE9, the forgotyourpassword appears above the form!
Is there a way to do this with just CSS and having it work with IE7 and above and firefox?

Answer 1

#content form{
position: absolute;
top: 80px;
right: 0px;
}
#forgot-password{
height:80px;
}
If you try something like this, you take the form out of the flow, and the link will appear above it without any fine-tuning. Once the top value for #content form and the height value for #forgot-password match, you should be safe as houses.
In some cases, you could have issues with clearing the absolutely positioned div, but you say you're setting the height for #content, so it shouldn't be a problem here.

Answer 2

Since I am not able to change the markup for the form, I am not able to insert the div for forgotyourpassword as a child of the form.
So, I added a wrapper div:
<div id="content">
<img src="some_content.jpg">
<div id="wrapper>
<form action="...">
<input type="text" ... >
<input type="submit" ...>
</form>
<div id="forgotyourpassword">
Forgot your password?
</div>
</div>
</div>
Then is simply a matter of adjusting the margins for the forgotyourpassword div:
#forgotyourpassword{
float: left;
margin-top: 10px;
}
This is the best solution I can come up with now as the wrapper div does not add any sematic value to the document, but I don't think there would be an easy solution otherwise (until we can use math and get dimensions of elements in CSS).