Width change of one row moves the whole div up - html

Question

I am trying to create an overlay for the website, it should have the form of three boxes stacked on top of each other. Currently, they are situated so that the first two are on the first row, and the third one is on the bottom. To make them all be on a separate row, I am trying to add single parameter to css: width: 100%, which worked for the third row, but ruins everything if I do it to either of the ones left.
Here is the code snippet, It will work on its own:
* {
box-sizing: border-box;
}
#box {
width: 70vw;
height: 80vh;
margin: 10px;
padding: 10px;
border-radius: 25px;
}
.column4 {
height: 39vh;
width: 50%;
float: left;
padding: 50px;
text-align: center;
color: black;
font-size: 20px;
line-height: 1.3;
/*width: 100%;*/ /* here is the culprit*/
}
.column5 {
height: 39vh;
width: 100%;
float: left;
padding: 10px;
text-align: center;
color: black;
font-size: 20px;
line-height: 1.3;
}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 2;
cursor: pointer;
}
#text {
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#boxt3 {
font-size: 25px;
}
#boxt1 {
font-size: 20px;
}
#boxt2 {
font-size: 20px;
}
<div id="overlay" style="z-index: 100; display: block;" onclick="off()">
<div id="text">
<div id="box" style="background:#fff">
<div class="row">
<div id="boxt1" class="column4" style="padding-top: 0; overflow: auto">Facebook, Inc.<br>NASDAQ<br>US<br>Internet Content & Information<br>Communication Services<br>some nice info</div>
<div id="boxt2" class="column4" style="padding-top: 0; overflow: auto">Price: 341.00 <br>mCap: 965.39B<br>Beta: 1.295305<br>volAvg: 14142012<br>P/E: NA</div>
<div class="column5" style="padding-top: 5; overflow: auto">
<h2 id="boxt3" stle="">Key features:<br> Net income: 6969% year-to-year<br> Undervalued on Very% by P/S<br>We love your data -Mark<br><br> Estimated probability of success: 0<br></h2>
</div>
</div>
</div>
</div>
</div>
I understand that there is probably some dumb mistake, but I can't find it at all (I have just started learning :) ). What is the issue here?

Answer 1

The issue occurs because you have set the height for the child element which is too high (39vh + 39vh + 39vh) for the parent element (80vh) . Try fitting the height of the child elements into parent's height. It will fix your problem.
* {
box-sizing: border-box;
}
#box {
width: 70vw;
height: 80vh;
/*margin: 10px;
padding: 10px;*/
border-radius: 25px;
}
.column4 {
height: 20vh;
width: 50%;
float: left;
padding: 50px 50px 10px;
text-align: center;
color: black;
font-size: 20px;
line-height: 1.3;
width: 100%;
}
*{box-sizing:border-box;}
.column5 {
height: 40vh;
width: 100%;
float: left;
padding: 10px;
text-align: center;
color: black;
font-size: 20px;
line-height: 1.3;
}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 2;
cursor: pointer;
}
#text {
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#boxt3 {
font-size: 25px;
}
#boxt1 {
font-size: 20px;
}
#boxt2 {
font-size: 20px;
}
<div id="overlay" style="z-index: 100; display: block;" onclick="off()">
<div id="text">
<div id="box" style="background:#fff">
<div class="row">
<div id="boxt1" class="column4" style="padding-top: 0; overflow: auto">Facebook, Inc.<br>NASDAQ<br>US<br>Internet Content & Information<br>Communication Services<br>some nice info</div>
<div id="boxt2" class="column4" style="padding-top: 0; overflow: auto">Price: 341.00 <br>mCap: 965.39B<br>Beta: 1.295305<br>volAvg: 14142012<br>P/E: NA</div>
<div class="column5" style="padding-top: 5; overflow: auto">
<h2 id="boxt3" stle="">Key features:<br> Net income: 6969% year-to-year<br> Undervalued on Very% by P/S<br>We love your data -Mark<br><br> Estimated probability of success: 0<br></h2>
</div>
</div>
</div>
</div>
</div>
Now I have set the child element's height to 20vh + 20vh + 40vh sums up to the height of the parent's height 80vh

Answer 2

You must remove width: 100% from column5 class

Answer 3

* {
box-sizing: border-box;
}
#box {
width: 70vw;
height: 80vh;
margin: 10px;
padding: 10px;
border-radius: 25px;
}
.column4 {
height: 39vh;
width: 50%;
float: left;
padding: 50px;
text-align: center;
color: black;
font-size: 20px;
line-height: 1.3;
/*width: 100%;*/ /* here is the culprit*/
}
.column5 {
height: 39vh;
float: left;
padding: 10px;
text-align: center;
color: black;
font-size: 20px;
line-height: 1.3;
}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 2;
cursor: pointer;
}
#text {
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#boxt3 {
width : 50px;
font-size: 25px;
}
#boxt1 {
width : 30px;
font-size: 20px;
}
#boxt2 {
width : 50px;
font-size: 20px;
}

Answer 4

<div id="overlay" style="z-index: 100; display: block;" onclick="off()">
<div id="text">
<div id="box" style="background:#fff">
<div class="row">
<div id="boxt1" class="column4" style="padding-top: 0; overflow: auto">Facebook, Inc.<br>NASDAQ<br>US<br>Internet Content & Information<br>Communication Services<br>some nice info</div>
<div id="boxt2" class="column4" style="padding-top: 0; overflow: auto">Price: 341.00 <br>mCap: 965.39B<br>Beta: 1.295305<br>volAvg: 14142012<br>P/E: NA</div>
<div class="column5" style="padding-top: 5; overflow: auto">
<h2 id="boxt3" stle="">Key features:<br> Net income: 6969% year-to-year<br> Undervalued on Very% by P/S<br>We love your data -Mark<br><br> Estimated probability of success: 0<br></h2>
</div>
</div>
</div>
</div>
</div>