I am facing an issue where I created a div with display:table-cell; and it appears as shown in the first picture, which is what I want. However, when I add another div, it changes to look like the second picture. All I want is for the text to be in the middle and the second div to be positioned below the first one.
Here is my code:
<div id="container">
<div id="over_asero">
<p id="titel_text"> </p>
<p id="sub_text"></p>
<p id="sub_text"></p>
</div>
<div id="veiligheid">
<p id="titel_text"> </p>
<p id="sub_text"></p>
<p id="sub_text"></p>
</div>
#container
{
position: relative;
width: 1140px;
height: 1500px;
margin: auto;
background-color: red;
}
#over_asero
{
position: relative;
width: 1140px;
height: 400px;
top: 150px;
z-index: 2;
display: table-cell;
vertical-align: middle;
}
#over_asero p
{
color: white;
font-family: 'Open Sans', sans-serif;
}
#titel_text
{
font-size: 16px;
}
#sub_text
{
font-size: 12px;
}
#veiligheid
{
position: relative;
width: 1140px;
height: 400px;
top: 550px;
z-index: 2;
background-color: blue;
display: table-cell;
vertical-align: middle;
}