Place element outside but aligned to element - html

Question

The title is a bit fuzzy, but here is want I want. I created a register form. I want the two error messages to be displayed next to the two input boxes but outside the whole form. Everything you see in the middle is in one div that is horizontally aligned to center.
I don't know if using the top property(%) can help placing them vertically but then I still need to align them to the right of the form.
Code:
<div id="container">
<div id="container_center">
<form name="RegForm" method="post" action="/validate_register2.php" onsubmit="getDatum()">
<table class="minden2">
<tr>
<td>
<h1 class="title">Register</h1>
</td>
</tr>
<tr>
<td>
<table class="cont2">
<tr>
<td class="hely">
<p><b>Username:</b></p>
</td>
</tr>
<tr>
<td>
<input type="text" name="username" class="aaa" id="form_username" maxlength="25" value="">
</td>
</tr>
<tr>
<td class='reg'>
<p class='le'><b>Password:</b></p>
</td>
</tr>
<tr>
<td>
<input class="tooltip" type="password" name="password1" id="form_password1" maxlength="25" value="">
</td>
</tr>
<tr>
<td class="reg">
<p class='le'><b>Email:</b></p>
</td>
</tr>
<tr>
<td>
<input type="text" name="email1" class="i" id="form_email1" maxlength="254" value="">
</td>
</tr>
<tr>
<td>
<label id="c"><input type="checkbox" name="cb" id="acceptagreement" class="cb" onchange="enableSubmitButton()"/>I have read and
agreed to the Terms of use and Privacy Policy.</label>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="submit">
<input type="submit" name="submit" value="Register" id="submit" class="submitbtn"/>
</td>
</tr>
</table>
</form>
<p id='error1' >Error message 1<p>
</div>
</div>
#container {
border: 0px solid green;
margin:0;
}
#container_center{
border: 0px solid black;
width: 320px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
background: #FFFFFF;
padding: 20px;
padding-bottom:15px;
padding-top:0;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-box-shadow:0 0px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow:0 0px 10px rgba(0, 0, 0, 0.5);
box-shadow:0 0px 10px rgba(0, 0, 0, 0.5);
}
table.minden2 {
border:0px solid red;
border-collapse: collapse;
margin:0;
text-align:center;
width: 100%;
}
Full code available here:
http://www55.zippyshare.com/v/84179336/file.html
http://www63.zippyshare.com/v/98322849/file.html

Answer 1

You could use the fact that overflow can be displayed outside the parent div using a row div with wrapping disabled
white-space: nowrap;
and fixing the width of the container to the the desired amount.
See this example http://jsfiddle.net/sk96t/3/
You can notice that changing font size or spacing between the fields the error message keeps the vertical alignment.

Answer 2

Assuming the error messages come just before or after their associated form field, you could float the error messages right and give them a negative right margin. That will pull them outside of the containing div. Then you can play with the top margin on the error messages to get the vertical offset you're looking for. Just make sure overflow is visible on the containing div, or you'll hide the messages when they're shifted right.

Answer 3

If you want the two error messages to be displayed next to the two input boxes but outside the whole <form>, you can do it by placing your <form> tag just outside your <div> tag.
Show your code.