Images overlaying the footer

Question

For some reason when I add images to the < div class="resto2"> the div doesn't increase the size dynamically, instead it simply overrides the footer which shouldn't happen maybe need some help although it seems like a relatively simple problem. I wanted the < div class="resto1" > to not change size only the resto2, according to the amount of images I submit.

JSFiddle LINK: https://jsfiddle.net/mjyk8dzw/1/

<section>

    <div class="totall">
        <div class="barraesquerda">

            <button class="divbotao" id="showit">
                <span href="#" class="innerButton">
                    sobre o projeto
                </span>
            </button>

            <button class="divbotao" id="showit2">
                <span href="#" class="innerButton">
                    equipa e intervenientes
                </span>
            </button>

        </div>

        <div class="resto">

            <h3
                style="font-family: 'Merriweather Sans', sans-serif; font-size: 30px; margin-bottom: 20px; color:#333f50; padding-top: 60px; padding-left: 50px;">
                Sobre o projeto
            </h3>

            <h5
                style="font-family: 'Arial Narrow, sans-serif'; font-size: 17px; padding-right: 200px; color:#060633; padding-left: 50px; padding-bottom: 45px;">
                <b>duis a mollis urna. In hac habitasse platea dictumst. Vestibulum nisi nunc, elementum et vehicula
                    vel, rhoncus non metus.
                    In vel dapibus dolor. Sed at laoreet turpis. Donec nec aliquam velit. Quisque blandit nisi
                    mauris.</b>
            </h5>
        </div>

        <div class="resto2" style="display: none;">

            <h3
                style="font-family: 'Merriweather Sans', sans-serif; font-size: 30px; margin-bottom: 20px; color:#333f50; padding-top: 60px; padding-left: 50px;">
                Equipa e intervenientes
            </h3>

            <div style="font-family: 'Arial Narrow, sans-serif'; font-size: 17px; padding-right: 200px; color:#060633; padding-left: 50px;  padding-bottom: 20px;">

                <section class="product_section layout_padding">
                    <div style="padding-top: 20px;">
                        <div class="container">
                            <div class="row justify-content-center mt-3">

                                <div class="ml-5 imgList">

                                        <div class="image">
                                            <img class="centrare" style="object-fit: cover; width:225px; height:280px;"
                                                src="https://img.freepik.com/vetores-gratis/ilustracao-do-icone-dos-desenhos-animados-da-meditacao-do-unicornio-fofo_138676-2262.jpg?w=2000" alt="">
                                        </div>
                                </div>
                                
                                 <div class="ml-5 imgList">

                                        <div class="image">
                                            <img class="centrare" style="object-fit: cover; width:225px; height:280px;"
                                                src="https://i.pinimg.com/564x/32/c7/3a/32c73aaec6d5eff3d183011fec6e43a1.jpg" alt="">
                                        </div>
                                </div>
                                
                                    <div class="ml-5 imgList">

                                        <div class="image">
                                            <img class="centrare" style="object-fit: cover; width:225px; height:280px;"
                                                src="https://i.pinimg.com/564x/8e/c2/45/8ec245dfe94c87cc3d325970f2907982.jpg" alt="">
                                        </div>
                                </div>  
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</section>

<footer>
                <div class="container">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="full">
                                <div class="information_f">
                                <p><strong style="color: white;">CENTRO</strong></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
               </footer>

<script>
$(function() {
    $('button#showit').on('click', function() {
        $('.resto').show();
        $('.resto2').hide();
    });

    $('button#showit2').on('click', function() {
        $('.resto2').show();
        $('.resto').hide();
    });
});
</script>
</html>

<style>
    footer {
        background: #333F50;
        padding: 90px 0 70px;
    }
    .totall { width:100%; height: 700px;}
    
    .barraesquerda { background-color: #dbdee1; float: left; width: 22%; height: 100%; position: relative;}
    
    .image { position: relative; margin-right: 1.4rem; margin-bottom: 3rem; color: white; z-index:1; display: flex; justify-content: center;}
                              
    .image::after{ content:""; position:absolute; background: linear-gradient(0deg,        rgba(39,38,42,1) 0%, rgba(255,255,255,0)     60%); z-index:2; height:100%; width:100%; top:0; left:0;}
</style>

Answer 1

Assuming you div with barraesquerda class is your sidebar and sidebar should be fixed. here is the new css code:

 footer {
    background: #333f50;
    padding: 90px 0 70px;
  }
  .totall {
    width: 100%;
    height: 700px;
    overflow: scroll;
  }

  .barraesquerda {
    background-color: #dbdee1;
    float: left;
    width: 22%;
    height: 100%;
    position: fixed;
  }
  .resto2, .resto {
    padding-left: 22%;
  }
  .image {
    position: relative;
    margin-right: 1.4rem;
    margin-bottom: 3rem;
    color: white;
    display: flex;
    justify-content: center;
  }

  .image::after {
    content: "";
    position: absolute;
    background: linear-gradient(
      0deg,
      rgba(39, 38, 42, 1) 0%,
      rgba(255, 255, 255, 0) 60%
    );
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
  }

if you notice, the .total has overflow-y of scroll which keeps your images inside with scrolling behavior and don't let them overlay. Padding and margins from left side are duet to sidebar since it overlays the footer and body content.

Answer 2

I managed to edit the code to what you wanted. Below, edited code:

//=======================HTML=======================//

    <html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<section class="section" >

    <div class="totall">
        <div class="barraesquerda">

            <button class="divbotao" id="showit">
                <span href="#" class="innerButton">
                    sobre o projeto
                </span>
            </button>

            <button class="divbotao" id="showit2">
                <span href="#" class="innerButton">
                    equipa e intervenientes
                </span>
            </button>

        </div>

        <div class="resto">

            <h3
                style="font-family: 'Merriweather Sans', sans-serif; font-size: 30px; margin-bottom: 20px; color:#333f50; padding-top: 60px; padding-left: 50px;">
                Sobre o projeto
            </h3>

            <h5
                style="font-family: 'Arial Narrow, sans-serif'; font-size: 17px; padding-right: 200px; color:#060633; padding-left: 50px; padding-bottom: 45px;">
                <b>duis a mollis urna. In hac habitasse platea dictumst. Vestibulum nisi nunc, elementum et vehicula
                    vel, rhoncus non metus.
                    In vel dapibus dolor. Sed at laoreet turpis. Donec nec aliquam velit. Quisque blandit nisi
                    mauris.</b>
            </h5>
        </div>

        <div class="resto2" style="display: none;">

            <h3
                style="font-family: 'Merriweather Sans', sans-serif; font-size: 30px; margin-bottom: 20px; color:#333f50; padding-top: 60px; padding-left: 50px;">
                Equipa e intervenientes
            </h3>

            <div style="font-family: 'Arial Narrow, sans-serif'; font-size: 17px; padding-right: 200px; color:#060633; padding-left: 50px;  padding-bottom: 20px;">

                <section class="product_section layout_padding">
                    <div style="padding-top: 20px;">
                        <div class="container">
                            <div class="row justify-content-center mt-3">

                                <div class="ml-5 imgList">

                                        <div class="image">
                                            <img class="centrare" style="object-fit: cover; width:225px; height:280px;"
                                                src="https://img.freepik.com/vetores-gratis/ilustracao-do-icone-dos-desenhos-animados-da-meditacao-do-unicornio-fofo_138676-2262.jpg?w=2000" alt="">
                                        </div>
                                </div>
                                
                                 <div class="ml-5 imgList">

                                        <div class="image">
                                            <img class="centrare" style="object-fit: cover; width:225px; height:280px;"
                                                src="https://i.pinimg.com/564x/32/c7/3a/32c73aaec6d5eff3d183011fec6e43a1.jpg" alt="">
                                        </div>
                                </div>
                                
                                    <div class="ml-5 imgList">

                                        <div class="image">
                                            <img class="centrare" style="object-fit: cover; width:225px; height:280px;"
                                                src="https://i.pinimg.com/564x/8e/c2/45/8ec245dfe94c87cc3d325970f2907982.jpg" alt="">
                                        </div>
                                </div>  
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</section>

<footer>
                <div class="container">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="full">
                                <div class="information_f">
                                <p><strong style="color: white;">CENTRO</strong></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
               </footer>

<script>
$(function() {
    $('button#showit').on('click', function() {
        $('.resto').show();
        $('.resto2').hide();
        $('.section').removeClass('teste');
    });

    $('button#showit2').on('click', function() {
        $('.resto2').show();
        $('.resto').hide();
        $('.barraesquerda').addClass('teste2');
        $('.section').addClass('teste');
    });
});
</script>
</html>

//=======================CSS=======================//

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.resto, .resto2, footer {
    margin-left: 22%;
}
.teste {
    height: fit-content;
}

.teste2{
    position: absolute;
    min-height: 100%;
}
footer {
    background: #333F50;
    padding: 90px 0 70px;
  }
  
  .totall {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .barraesquerda {
    background-color: #dbdee1;
    float: left;
    width: 22%;
    height: 100%;
    position: fixed;
  }
  
  .image {
    position: relative;
    margin-right: 1.4rem;
    margin-bottom: 3rem;
    color: white;
    z-index: 1;
    display: flex;
    justify-content: center;
  }
  
  .image::after {
    content: "";
    position: absolute;
    background: linear-gradient(0deg, rgba(39, 38, 42, 1) 0%, rgba(255, 255, 255, 0) 60%);
    z-index: 2;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
  }
  

What happened was that the div '.total', where all the content of the divs '.resto' and '.resto2' was inserted, already had a defined height, according to the content of the div '.resto', so when you showed the '.resto2' div, it continued with the original style.

CHANGES:

1 - I added a command in your script for it to add the '.teste' class, this class will add the 'height: fit-content' attribute that will consider the content of '.teste2', and when you click on the other button (which will show the contents of the div '.test') it will remove this class and revert to the original formatting.

2 - I added the following CSS commands for it to remove the browser's default formatting, as it leaves white margins.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

3 - As the '.barra Esquerda' class is a menu, I set the height to '100%' and position to 'fixed', in this way, regardless of the size of your page, the height of the menu will always be the same as the page.

4 - As your menu has a width of 22%, I left all the other elements with a margin-left of 22% so they don't get under the menu.

TRADUÇÃO EM PORTUGUÊS (PORTUGUESE TRANSLATION)

O que aconteceu foi que a div '.total', onde estava inserido todo o conteúdo das divs '.resto' e '.resto2', já estava com uma altura definida, de acordo com o conteúdo da div '.resto', então quando você mostrava a div '.resto2', ele continuava com o estilo original.

MUDANÇAS:

1 - Adicionei um comando no seu script para ele adicionar a classe '.teste', esta classe irá adicionar o atributo 'height: fit-content' que irá considerar o conteúdo de '.teste2', e ao você clicar no outro botão (que irá mostar o conteúdo da div '.teste') ele vai remover esta classe e voltar a formatação original.

2 - Adicionei os comandos seguintes CSS para ele ele retirar a formatação padrão do navegador, pois ele deixa margens brancas.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

3 - Como a classe '.barraesquerda' é um menu, eu coloquei a altura de '100%' e posição como 'fixed', desta forma independente do tamanho da sua página, a altura do menu sempre será a mesma da página.

4 - Como o seu menu tem uma largura de 22%, deixei todos os demais elementos com um margin-left de 22% para não ficarem por baixo do menu.

Answer 3

Please replace below css code.

 footer { background: #333F50; padding: 90px 0 70px; }.totall { width:100%; height: auto; display:flex; flex-wrap:wrap; }.barraesquerda { background-color: #dbdee1; width: 22%; position: relative;}.image { position: relative; margin-right: 1.4rem; margin-bottom: 3rem; color: white; z-index:1; display: flex; justify-content: center;}.resto2,.resto { width:78%; }.image::after{ content:""; position:absolute; background: linear-gradient(0deg, rgba(39,38,42,1) 0%, rgba(255,255,255,0) 60%); z-index:2; height:100%; width:100%; top:0; left:0;}

 <html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <section> <div class="totall"> <div class="barraesquerda"> <button class="divbotao" id="showit"> <span href="#" class="innerButton"> sobre o projeto </span> </button> <button class="divbotao" id="showit2"> <span href="#" class="innerButton"> equipa e intervenientes </span> </button> </div> <div class="resto"> <h3 style="font-family: 'Merriweather Sans', sans-serif; font-size: 30px; margin-bottom: 20px; color:#333f50; padding-top: 60px; padding-left: 50px;"> Sobre o projeto </h3> <h5 style="font-family: 'Arial Narrow, sans-serif'; font-size: 17px; padding-right: 200px; color:#060633; padding-left: 50px; padding-bottom: 45px;"> <b>duis a mollis urna. In hac habitasse platea dictumst. Vestibulum nisi nunc, elementum et vehicula vel, rhoncus non metus. In vel dapibus dolor. Sed at laoreet turpis. Donec nec aliquam velit. Quisque blandit nisi mauris.</b> </h5> </div> <div class="resto2" style="display: none;"> <h3 style="font-family: 'Merriweather Sans', sans-serif; font-size: 30px; margin-bottom: 20px; color:#333f50; padding-top: 60px; padding-left: 50px;"> Equipa e intervenientes </h3> <div style="font-family: 'Arial Narrow, sans-serif'; font-size: 17px; padding-right: 200px; color:#060633; padding-left: 50px; padding-bottom: 20px;"> <section class="product_section layout_padding"> <div style="padding-top: 20px;"> <div class="container"> <div class="row justify-content-center mt-3"> <div class="ml-5 imgList"> <div class="image"> <img class="centrare" style="object-fit: cover; width:225px; height:280px;" src="https://img.freepik.com/vetores-gratis/ilustracao-do-icone-dos-desenhos-animados-da-meditacao-do-unicornio-fofo_138676-2262.jpg?w=2000" alt=""> </div> </div> <div class="ml-5 imgList"> <div class="image"> <img class="centrare" style="object-fit: cover; width:225px; height:280px;" src="https://i.pinimg.com/564x/32/c7/3a/32c73aaec6d5eff3d183011fec6e43a1.jpg" alt=""> </div> </div> <div class="ml-5 imgList"> <div class="image"> <img class="centrare" style="object-fit: cover; width:225px; height:280px;" src="https://i.pinimg.com/564x/8e/c2/45/8ec245dfe94c87cc3d325970f2907982.jpg" alt=""> </div> </div> </div> </div> </div> </section> </div> </div> </div> </section> <footer> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="full"> <div class="information_f"> <p><strong style="color: white;">CENTRO</strong></p> </div> </div> </div> </div> </div> </footer> <script> $(function() { $('button#showit').on('click', function() { $('.resto').show(); $('.resto2').hide(); }); $('button#showit2').on('click', function() { $('.resto2').show(); $('.resto').hide(); }); }); </script> </html>