Display Messages notifications inside a div box - html

Question

When the user enter a not valid credentials it print this notificaitons message:
Sorry, your password was incorrect.<br/> Please double-check your password
But this doesn't look good when it is printed:
I want it to be printed between the Login button and the Forgot password.
Like that:
So theoretically the white box should expend to the bootom to leave so place for the notifications message
html file
<div class="testlol2" >
<div class="login-box" align="center">
<img class="logo" src="{% static 'images/testlogo.png' %}" alt="">
<div class="testlol" align="center">
<form action="" method="post">
{% csrf_token %}
{{ form|crispy }}
<div class="my-button">
<input class="login-button" type="submit" value="Log in">
</div>
</form>
{% if messages %}
<ul class="messages">
{% for message in messages %}
<p{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</p>
{% endfor %}
</ul>
{% endif %}
<a class="forgot" href="">Forgot password?</a>
</div>
</div>
</div>
css file
body{
background-color: #fafafa !important;
}
.messages {
position: relative;
top: 10px;
right: 8px;
color: red;
}
.logo {
position: relative;
top: 28px;
left: 134px;
width: 200px;
}
.testlol {
position: relative;
top: 115px;
right: 90px;
}
.testlol2 {
display:flex;
justify-content: center;
}
.login-box {
display:flex;
justify-content: center;
align-items: start;
align-self: center;
position: relative;
top: 100px;
background: #fff;
border: 1px solid #e6e6e6;
border-radius: 1px;
margin:0 0 10px;
padding: 10px 0;
height: 280px;
width: 325px;
}
.forgot {
position: absolute;
top: 128px;
right: 95px;
font-size: 12px;
margin-top: 12px;
text-align: center;
color: #000000;
line-height: 14px!important;
text-decoration: none;
}

Answer 1

Your code (css) is quite a mess. I tried making some minimal changes to it would partly look ok. Main fix was to make the .messages have margin of 115px from top rather than be positioned 115px from top, so that login-box would expand in height.
body {
background-color: #fafafa !important;
}
.messages {
position: relative;
top: 10px;
right: 8px;
color: red;
}
.logo {
position: relative;
top: 28px;
left: 134px;
width: 200px;
}
.testlol {
position:relative;
right: 90px;
margin-top: 115px;
}
.testlol2 {
display: flex;
justify-content: center;
}
.login-box {
display: flex;
justify-content: center;
align-items: start;
align-self: center;
position: relative;
top: 100px;
background: #fff;
border: 1px solid #e6e6e6;
border-radius: 1px;
margin: 0 0 10px;
padding: 10px 0;
/* height: 280px; */
width: 325px;
}
.forgot {
/* position: absolute; */
top: 128px;
right: 95px;
font-size: 12px;
margin-top: 12px;
text-align: center;
color: #000000;
line-height: 14px!important;
text-decoration: none;
}
<div class="testlol2">
<div class="login-box" align="center">
<img class="logo" src="{% static 'images/testlogo.png' %}" alt="">
<div class="testlol" align="center">
<form action="" method="post">
{% csrf_token %} {{ form|crispy }}
<div class="my-button">
<input class="login-button" type="submit" value="Log in">
</div>
</form>
{% if messages %}
<ul class="messages">
{% for message in messages %}
<p{% if message.tags %} class="{{ message.tags }}" {% endif %}>{{ message }}</p>
{% endfor %}
</ul>
{% endif %}
<a class="forgot" href="">Forgot password?</a>
</div>
</div>
</div>