Positioning the validation error message - php

Question

I have this login form which looks like this:
When I enter a wrong information, it would look like this:
Now the problem is that when I get the error, it moves my login form down.
Is there anyway I could prevent the form from moving when I get the error message? Also maybe I could put the error message below the form but I don't know how to, I tried echoing the error below the form but it didn't work.
Here's my PHP:
<?php
/*********************************************************************
* This script has been released with the aim that it will be useful.
* Written by Vasplus Programming Blog
* Website: www.vasplus.info
* Email: info#vasplus.info
* All Copy Rights Reserved by Vasplus Programming Blog
***********************************************************************/
session_start();
ob_start();
//Include the database connection file
include "database_connection.php";
//Check to see if the submit button has been clicked to process data
if(isset($_POST["submitted"]) && $_POST["submitted"] == "yes")
{
//Variables Assignment
$username = trim(strip_tags($_POST['username']));
$user_password = trim(strip_tags($_POST['passwd']));
$validate_user_information = mysql_query("select * from `signup_and_login_users_table` where `username` = '".mysql_real_escape_string($username)."' and `password` = '".mysql_real_escape_string($user_password)."'");
//Validate against empty fields
if($username == "" || $user_password == "")
{
$error = '<br><div class="info">Sorry, all fields are required to log into your account. Thanks.</div><br>';
}
elseif(mysql_num_rows($validate_user_information) == 1) //Check if the information of the user are valid or not
{
//The submitted info of the user are valid therefore, grant the user access to the system by creating a valid session for this user and redirect this user to the welcome page
$get_user_information = mysql_fetch_array($validate_user_information);
$_SESSION["VALID_USER_ID"] = $username;
$_SESSION["USER_FULLNAME"] = strip_tags($get_user_information["fullname"]);
header("location: home.php");
}
else
{
//The submitted info the user are invalid therefore, display an error message on the screen to the user
$error = '<div class="info" style="color: red; text-align: center;">You have entered an invalid username or password</div>';
echo $error;
}
}
?>
Here's my HTML:
body {
background-image: url(img/hero.jpg);
background-size: cover;
font-family: Montserrat;
}
.logo {
width: 400px;
height: 200px;
background-image: url(img/corelogo.png);
background-size: cover;
margin: -20px auto;
}
.login-block {
width: 320px;
padding: 20px;
background: transparent;
border-radius: 5px;
border-top: 5px solid #011f4b;
margin: 0 auto;
font-family: Questrial;
}
.login-block h1 {
text-align: center;
color: #000;
font-size: 18px;
text-transform: capitalize;
letter-spacing: 2px;
margin-top: 0;
margin-bottom: 20px;
}
.login-block input {
width: 100%;
height: 42px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 20px;
font-size: 14px;
font-family: Questrial;
letter-spacing: 2px;
padding: 0 20px 0 50px;
outline: none;
}
.login-block input#username {
background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px top no-repeat;
background-size: 16px 80px;
}
.login-block input#username:focus {
background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px bottom no-repeat;
background-size: 16px 80px;
}
.login-block input#password {
background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px top no-repeat;
background-size: 16px 80px;
}
.login-block input#password:focus {
background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px bottom no-repeat;
background-size: 16px 80px;
}
.login-block input:active,
.login-block input:focus {
border: 1px solid #011f4b;
}
.login-block button {
width: 100%;
height: 40px;
background: #011f4b;
box-sizing: border-box;
border-radius: 5px;
border: 0px solid #1293e1;
color: #fff;
font-weight: 500;
text-transform: uppercase;
font-size: 14px;
font-family: Questrial;
letter-spacing: 2px;
outline: none;
cursor: pointer;
margin-bottom: 10px;
}
.login-block button:hover {
background: #1293e1;
}
<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<center>
<div style="font-family:Questrial, sans-serif; font-size:24px;"></div><br clear="all" /><br clear="all" />
<!-- Code Begins -->
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<div class="logo"></div>
<div class="login-block">
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<h1>Employee Login</h1>
<input type="text" value="" placeholder="Username" id="username" name="username" required />
<input type="password" value="" placeholder="Password" id="password" name="passwd" required />
<input type="hidden" name="submitted" id="submitted" value="yes">
<button type="submit" name="submit" class="btn btn-primary btn-block btn-large">Login</button>
</form>
<button>Back</button>
</div>
<!-- Code Ends -->

Answer 1

Basically try this:
.info {position: absolute; }

Answer 2

1st Remove echo $error in the Code:
$error = '<div class="info" style="color: red; text-align: center;">You have entered an invalid username or password</div>';
//echo $error;
2nd Add this Code at the top of form tag in html
<?php
if(isset($error) && isset($_POST['submit'])){
echo $error;
}
?>
<?php
/*********************************************************************
* This script has been released with the aim that it will be useful.
* Written by Vasplus Programming Blog
* Website: www.vasplus.info
* Email: info#vasplus.info
* All Copy Rights Reserved by Vasplus Programming Blog
***********************************************************************/
session_start();
ob_start();
//Include the database connection file
include "database_connection.php";
//Check to see if the submit button has been clicked to process data
if(isset($_POST["submitted"]) && $_POST["submitted"] == "yes")
{
//Variables Assignment
$username = trim(strip_tags($_POST['username']));
$user_password = trim(strip_tags($_POST['passwd']));
$validate_user_information = mysql_query("select * from `signup_and_login_users_table` where `username` = '".mysql_real_escape_string($username)."' and `password` = '".mysql_real_escape_string($user_password)."'");
//Validate against empty fields
if($username == "" || $user_password == "")
{
$error = '<br><div class="info">Sorry, all fields are required to log into your account. Thanks.</div><br>';
}
elseif(mysql_num_rows($validate_user_information) == 1) //Check if the information of the user are valid or not
{
//The submitted info of the user are valid therefore, grant the user access to the system by creating a valid session for this user and redirect this user to the welcome page
$get_user_information = mysql_fetch_array($validate_user_information);
$_SESSION["VALID_USER_ID"] = $username;
$_SESSION["USER_FULLNAME"] = strip_tags($get_user_information["fullname"]);
header("location: home.php");
}
else
{
//The submitted info the user are invalid therefore, display an error message on the screen to the user
$error = '<div class="info" style="color: red; text-align: center;">You have entered an invalid username or password</div>';
//echo $error;
}
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="img/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CORE INTRANET</title>
<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
<!-- Required header file -->
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
body {
background-image: url(img/hero.jpg);
background-size: cover;
font-family: Montserrat;
}
.logo {
width: 400px;
height: 200px;
background-image: url(img/corelogo.png);
background-size: cover;
margin: -20px auto;
}
.login-block {
width: 320px;
padding: 20px;
background: transparent;
border-radius: 5px;
border-top: 5px solid #011f4b;
margin: 0 auto;
font-family: Questrial;
}
.login-block h1 {
text-align: center;
color: #000;
font-size: 18px;
text-transform: capitalize;
letter-spacing: 2px;
margin-top: 0;
margin-bottom: 20px;
}
.login-block input {
width: 100%;
height: 42px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 20px;
font-size: 14px;
font-family: Questrial;
letter-spacing: 2px;
padding: 0 20px 0 50px;
outline: none;
}
.login-block input#username {
background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px top no-repeat;
background-size: 16px 80px;
}
.login-block input#username:focus {
background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px bottom no-repeat;
background-size: 16px 80px;
}
.login-block input#password {
background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px top no-repeat;
background-size: 16px 80px;
}
.login-block input#password:focus {
background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px bottom no-repeat;
background-size: 16px 80px;
}
.login-block input:active, .login-block input:focus {
border: 1px solid #011f4b;
}
.login-block button {
width: 100%;
height: 40px;
background: #011f4b;
box-sizing: border-box;
border-radius: 5px;
border: 0px solid #1293e1;
color: #fff;
font-weight: 500;
text-transform: uppercase;
font-size: 14px;
font-family: Questrial;
letter-spacing: 2px;
outline: none;
cursor: pointer;
margin-bottom: 10px;
}
.login-block button:hover {
background: #1293e1;
}
</style>
<body>
<center>
<div style="font-family:Questrial, sans-serif; font-size:24px;"></div><br clear="all" /><br clear="all" />
<!-- Code Begins -->
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<div class="logo"></div>
<div class="login-block">
<?php
if(isset($error) && isset($_POST['submit'])){
echo $error;
}
?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<h1>Employee Login</h1>
<input type="text" value="" placeholder="Username" id="username" name="username" required />
<input type="password" value="" placeholder="Password" id="password" name="passwd" required />
<input type="hidden" name="submitted" id="submitted" value="yes">
<button type="submit" name="submit" class="btn btn-primary btn-block btn-large">Login</button>
</form>
<button>Back</button>
</div>
<!-- Code Ends -->
</center>
</body>
</html>