San Diego Coder 619 San Diego Coder 619 - 2 months ago 11
Sass (Sass) Question

Stop Div from going underneath other Div

I have google for an hour and messed witht he code myself. I cannot seem to find why my divs dont want to sit on top of each other.

one div sits underneath the other and I am having a brain fart as of right now, any suggestions would be of help.

Restating the question: How do I get all divs to push down content of other divs instead of going underneath the following div?

Here is the Codepen to recreate the problem I am having: https://codepen.io/livinglegendparagon/pen/wzWwya

/* BG */
body {
background-color: #000;
color: #000;
}

#bg {
height: 100%;
width: 100%;
left: 0;
top: 0;
opacity: 1;
position: relative;
height: -webkit-calc(100vh);
height: -moz-calc(100vh);
height: calc(100vh);
}
#PUTBACKGROUNDHERE, #PUTBACKGROUNDHERE2, #PUTBACKGROUNDHERE3, #PUTBACKGROUNDHERE4 {
background-color: #fff;
width: 100%;
position: relative;
height: 100%;
// min-height: -webkit-calc(100vh);
// min-height: -moz-calc(100vh);
// min-height: calc(100vh);
padding: 2.5% 0;
background-color: #fff;
display: block;
float: left;
clear: both;
@media (min-width: 280px) {
padding: 2.5% 5%;
}
}
#backGroundForViewWelcome {
background-color: white;
min-height: -webkit-calc(100vh);
min-height: -moz-calc(100vh);
min-height: calc(100vh);
}
.wrapper {
height: 100%;
width: 100%;
display: block;
}
.boxForServices {
position: relative;
height: 21.5vh;
margin: 3vh auto;
width: 100%;
color: white;
&:first-child {
margin-top: -webkit-calc(3vh + 40px);
margin-top: -moz-calc(3vh + 40px);
margin-top: calc(3vh + 40px);
}
&:last-child {
margin-bottom: -webkit-calc(3vh - 40px);
margin-bottom: -moz-calc(3vh - 40px);
margin-bottom: calc(3vh - 40px);
}
}
.boxForServicesTitle {
cursor: pointer;
position: relative;
text-align: center;
top: 50%;
border: red 5px solid;
background-color: blue;
border-radius: 5px;
margin: auto 5vh;
padding: 5vh 10%;
}
#sizeThisTextBoxForServices {
margin: 10% 10%;
width: 80%;
}
.centerBox {
margin: auto;
text-align: left;
}
.otherInput {
display: block;
width: 100%;
margin-bottom: 5%;
}

Answer

.boxForServices is missing a height attribute

Add a height of 100% and it will fix this issue.

I love asking questions, because the answer always comes to me once I post the question.

      .boxForServices {
        position: relative;
        height: 21.5vh;
        margin: 3vh auto;
        width: 100%;
        height: 100%;
        color: white;
        &:first-child {
          margin-top: -webkit-calc(3vh + 40px);
          margin-top: -moz-calc(3vh + 40px);
          margin-top: calc(3vh + 40px);
        }
        &:last-child {
          margin-bottom: -webkit-calc(3vh - 40px);
          margin-bottom: -moz-calc(3vh - 40px);
          margin-bottom: calc(3vh - 40px);
        }
      }