Last two divs are interfering: Text is disappearing into after section of previous div

Question

I am having trouble trying to get the last two divs to work together nicely when trying to create responsive code. The divers of "product_conclusion" and "custom_footer" keep making "ca_text disappear part way. I have been trying adjusting the pixels but it breaks too often so I tried the calc function. Either I'm doing it wrong or it is the wrong approach. New to html5 and css3.

https://www.changedwards.com/feedback/coding-page-long-copy/text-code-5/

Answer 1

I added comments, but here's the fix:

Remove height from:

• .product_conclusion
• .conclusion_about

Add clearfix to .conclusion_about.

Answer 2

I've found that you determine div product_conclusion's height and use display:block

Your problem is this:

1. Your parent's <div>, in this case is <div class="product_conclusion">'s height did not respond its child's height.

To solve this problem:

1. Simply add display:inline-block or display:table on <div class="conclusion_about">
2. Remove all height: n-px on your CSS, that will make your div can't expand more than that, or maybe you want to use min-height:n-px instead (Documentation source below)
3. Remove this CSS below (Because again, you don't want to determine the height) and your bottom will block the ca-text class of product_conclusion

//Try removing this
@media only screen and (max-width: 1140px) {
    .product_conclusion {
        height: calc(100% - 30px);
    }
    .product_conclusion:after {
    height: 150px;
    bottom: -145px;
    }
}

This is my CSS source code

<style>
/*PRODUCT CONCLUSION*/
.product_conclusion p {
   margin: 0;
}
.product_conclusion {
   background-image: url(https://www.changedwards.com/wp-content/uploads/2018/02/white-brick-15.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   //height: 800px; //Removed
}
.product_conclusion:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    background-color: transparent;
    background-size: cover;
    z-index: 1;
    height: 240px;
    top: -239px;
    background-image: url(https://www.changedwards.com/wp-content/uploads/2018/06/white-brick-15_bottom-e1529272154540.png);
}
.product_conclusion:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    background-color: transparent;
    background-size: cover;
    z-index: 1;
    height: 240px;
    bottom: -235px;
    background-image: url(https://www.changedwards.com/wp-content/uploads/2018/06/white-brick-15_top.png);
}
.conclusion_wrap{
    width: 100%;
}
.conclusion_about{
    width: 85%;
    margin: 0 auto;
    //height: 672px; //Removed
    display: inline-block; //NEW CODE or display:table;
}
.ca_text{
    width:63%;
    margin: 0 auto;
    float: left;
    padding: 3%;
}
.ca_picture{
    width:37%;
    margin: 0 auto;
    float: left;
    padding: 3%;
}
.ca_picture img{
    float: 0 auto;
}
.ca_text button {
  margin-top: 25px; 
  width: 150px;   
  font-size: 15px;
    z-index: 999;
}
#instagram {
   background-color: #bc2a8d;
}
#facebook {
   background-color: #4F81BD;
}
#ca_picture_media {
    display: none;
}
@media only screen and (max-width: 1140px) {
    .product_conclusion {
        //height: calc(100% - 30px); //Remove
    }
    .product_conclusion:after {
    //height: 150px; //Remove
    //bottom: -145px; //Remove
    }
}
@media only screen and (max-width: 960px) {
    .ca_picture{
        display: none;
    }
    #ca_picture_media {
      display: block;
        float: right;
        width: 35%;
    padding: 0 0 15px 15px;
    }
    .ca_text{
      width:100%;
    }
}
@media only screen and (max-width: 480px) {
  .ca_text, .ca_picutre {
      width:100%;
        float: none;
    }
}
/*PRODUCT CONCLUSION END*/
</style>

Solution Source:

1. Div parent not responding to child's height: How to make div not larger than its contents?

2. min-height CSS: https://www.w3schools.com/cssref/pr_dim_min-height.asp

Hope this will solve your problem.

Answer 3

Don't remove anything from your code. Just add clear:both; property in custom_footer class.