stop DIVs moving eachother - html

Question

I have 2 divs that I want to position close together, however they keep moving eachother. They are both under the main div.
HTML:
<div id="header">
<div id="title">Social</div>
</div>
<div id="main">
<div id='notif'><strong>Incorrect details.</strong>
</div>
<div id="signin">
<form name="signinform" action="authenticate.php" method="post" onsubmit="return validate(this)" id="signinform">
<p>
<input placeholder="Username / Email" class="input" type="text" name="user" id="user" maxlength="50">
</p>
<p>
<input placeholder="Password" class="input" type="password" name="password" id="password" maxlength="50">
</p>
<p>
<input type="checkbox" name="remember" id="remember" value="checked">
<label for="remember">Remember me</label>
</p>
<p>
<input class="button" type="submit" value="Sign in">
</p>
</form>
</div>
</div>
The CSS is as follows:
Main body which both divs comes under:
#main {
padding-top: 50px;
}
Form div:
#signin {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
margin: auto;
margin-top: 150px;
}
Error div:
#notif {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
height: 20px;
margin: auto;
margin-top: 140px;
}
I know that perhaps it has something to do with the position attribute..
Here is an image of what it looks like now, as you can see, I want both of the center objects to be close together without pushing each other away from the vertical center.

Answer 1

remove the margin-top from the #signin div - as this is what is putting pixels between the #notif div and the #signin div.
#main {
padding-top: 50px;
}
#signin {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
margin: auto;
}
#notif {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
height: 20px;
margin: auto;
margin-top: 140px;
}
<div id="header">
<div id="title">Social</div>
</div>
<div id="main">
<div id='notif'><strong>Incorrect details.</strong>
</div>
<div id="signin">
<form name="signinform" action="authenticate.php" method="post" onsubmit="return validate(this)" id="signinform">
<p>
<input placeholder="Username / Email" class="input" type="text" name="user" id="user" maxlength="50">
</p>
<p>
<input placeholder="Password" class="input" type="password" name="password" id="password" maxlength="50">
</p>
<p>
<input type="checkbox" name="remember" id="remember" value="checked">
<label for="remember">Remember me</label>
</p>
<p>
<input class="button" type="submit" value="Sign in">
</p>
</form>
</div>
</div>
Debugging
In this sort of situation, your page inspector is going to be your best friend.
In chrome, for example, when the page inspector is open, hovering an element will show you the margins of the element, as well as any padding being given to it.