How can I fix that my divs are overlapping?

Question

I know that this question has been asked a lot but the solutions for other posts don't work for me. On my front-page I have a section that works like a tab section, having 4 buttons on the bottom of this section that if clicked will load different content into this section. That all works fine but when I resize my browser, the row with my buttons overlaps with the content above it in that section. Adding display block is not solving the issue. Does anyone know how I can fix this?

Here is the HTML and CSS code:

<div class="container2">

  <div id="hp_slider_1" class="tabcontent">

    <div class="left">
      <div class="tabheading">
        <p>Heading</p>
      </div>

      <div class="slidertab">
        <?php echo do_shortcode('[smartslider3 slider=14]');?>
      </div>


    </div>


    <div class="right">
      <div class="tabheading">
        <p>Heading</p>
      </div>

      <div class="texttab">
        <h4 class="rightheading">Content1</h4>
        <p class="righttext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <a href="#" class="button_learnmore">Learn more.</a>
      </div>

    </div>

  </div>

  <div id="hp_slider_2" class="tabcontent">
    <h3>Paris</h3>
    <p>Paris is the capital of France.</p>
  </div>

  <div id="hp_slider_3" class="tabcontent">
    <h3>Tokyo</h3>
    <p>Tokyo is the capital of Japan.</p>
  </div>

  <div id="hp_slider_4" class="tabcontent">
    <h3>fourth</h3>
    <p>Hello.</p>
  </div>





  <div class="tab">
    <button class="tablinks" onclick="openCity(event, 'hp_slider_1')">Button1 </button>

    <button class="tablinks" onclick="openCity(event, 'hp_slider_2')">Button2</button>

    <button class="tablinks" onclick="openCity(event, 'hp_slider_3')">Button3</button>

    <button class="tablinks" onclick="openCity(event,'hp_slider_4')">Button4</button>
  </div>



</div>

CSS

/* Container2 Styling */

.container2 {
  overflow:hidden;
  height: 100vh;
  width: 100%;
  margin: 0;
  background-color: #81A1AA;
  color: white;
  position: relative;
  font-size: 16px;
  overflow: auto;

}

/* Style the tab content */
.tabcontent {
  text-align: center;
  display: none;
}

.tabheading {
  font-size: 16px;
  padding: 10px 0;
}

.left {
float: left;
width: 50%;
height: 100vh;
display: flex;
align-items: center;
flex-direction: column;
}


.slidertab {
padding-top: 50px;
display: block;

}

.right {
float: right;
width: 50%;
height: 100vh;
}

.texttab {
position: relative;

padding: 30px 70px;
}

.rightheading {

}

.righttext {
padding-bottom: 30px;
}

.button_learnmore {
    box-shadow: 0px 10px 14px -7px #4A6971;
    background:linear-gradient(to bottom, #4A6971 5%, #81A1AA 100%);
    background-color:#4A6971;
    border-radius:8px;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-size:12px;
    padding: 10px 20px;
    text-decoration:none;
}

.button_learnmore:hover {
    background: #B5CFD6;
  color: black;

}

.button_learnmore:active {
    position:relative;
    top:1px;
}


/* Style the tab */
.tab {

  text-align: center;
  width: 100%;
  height: 50px;
  border: black solid 1px;
  position: absolute;
  bottom: 0;
  overflow: auto;

}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 15px 50px;
  transition: 0.3s;
  font-size: 16px;
  color: white;
  font-family: 'Raleway', sans-serif;

}

/* Change background color of buttons on hover */
.tab button:hover {
  color: #4A6971;
}

/* Create an active/current tablink class */
.tab button.active {
  color: #4A6971;
}

Answer 1

If I were to use the Grid the code would be

.container2 {
        display: grid;
        grid-template-rows: 1fr;
    }

    .left {
        width: 50%;
        float: left;
        text-align: center;
    }

    .right {
        width: 50%;
        float: right;
        text-align: center;
    }

    .tab {

        border: black solid 1px;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
    }

    .tab button {
        background-color: inherit;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 15px 50px;
        transition: 0.3s;
        font-size: 16px;
        
        font-family: 'Raleway', sans-serif;

    }

<div class="container2">

        <div id="hp_slider_1" class="tabcontent">

            <div class="left">
                <div class="tabheading">
                    <p>Heading</p>
                </div>

                <div class="slidertab">
                    <h4 class="rightheading">Content1</h4>
                    <p class="righttext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
                        in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <a href="#" class="button_learnmore">Learn more.</a>
                </div>


            </div>


            <div class="right">
                <div class="tabheading">
                    <p>Heading</p>
                </div>

                <div class="texttab">
                    <h4 class="rightheading">Content1</h4>
                    <p class="righttext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
                        in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <a href="#" class="button_learnmore">Learn more.</a>
                </div>

            </div>

        </div>

        <div id="hp_slider_2" class="tabcontent">
            <h3>Paris</h3>
            <p>Paris is the capital of France.</p>
        </div>

        <div id="hp_slider_3" class="tabcontent">
            <h3>Tokyo</h3>
            <p>Tokyo is the capital of Japan.</p>
        </div>

        <div id="hp_slider_4" class="tabcontent">
            <h3>fourth</h3>
            <p>Hello.</p>
        </div>





        <div class="tab">
            <button class="tablinks" onclick="openCity(event, 'hp_slider_1')">Button1 </button>

            <button class="tablinks" onclick="openCity(event, 'hp_slider_2')">Button2</button>

            <button class="tablinks" onclick="openCity(event, 'hp_slider_3')">Button3</button>

            <button class="tablinks" onclick="openCity(event,'hp_slider_4')">Button4</button>
        </div>



    </div>

Answer 2

Seeing your code and guessing the future expansion of the application I believe you have to use flex to solve the issue.

.tab{
text-align: center;
width: 100%;
border:black solid 1px;
black solid 1px;
position: absolute;
bottom: 0;
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}

So your code will look as shown below.

   .container2 {
        overflow: hidden;
        height: 100vh;
        width: 100%;
        margin: 0;
        background-color: #81A1AA;
        color: white;
        position: relative;
        font-size: 16px;
        overflow: auto;

    }

    /* Style the tab content */
    .tabcontent {
        text-align: center;
        display: none;
    }

    .tabheading {
        font-size: 16px;
        padding: 10px 0;
    }

    .left {
        float: left;
        width: 50%;
        height: 100vh;
        display: flex;
        align-items: center;
        flex-direction: column;
    }


    .slidertab {
        padding-top: 50px;
        display: block;

    }

    .right {
        float: right;
        width: 50%;
        height: 100vh;
    }

    .texttab {
        position: relative;

        padding: 30px 70px;
    }

    .rightheading {}

    .righttext {
        padding-bottom: 30px;
    }

    .button_learnmore {
        box-shadow: 0px 10px 14px -7px #4A6971;
        background: linear-gradient(to bottom, #4A6971 5%, #81A1AA 100%);
        background-color: #4A6971;
        border-radius: 8px;
        display: inline-block;
        cursor: pointer;
        color: #ffffff;
        font-size: 12px;
        padding: 10px 20px;
        text-decoration: none;
    }

    .button_learnmore:hover {
        background: #B5CFD6;
        color: black;

    }

    .button_learnmore:active {
        position: relative;
        top: 1px;
    }


    /* Style the tab */
    .tab {

        
        border: black solid 1px;
       text-align: center;
width: 100%;


position: absolute;
bottom: 0;

display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;

    }

    /* Style the buttons inside the tab */
    .tab button {
        background-color: inherit;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 15px 50px;
        transition: 0.3s;
        font-size: 16px;
        color: white;
        font-family: 'Raleway', sans-serif;

    }

    /* Change background color of buttons on hover */
    .tab button:hover {
        color: #4A6971;
    }

    /* Create an active/current tablink class */
    .tab button.active {
        color: #4A6971;
    }

    <div class="container2">

        <div id="hp_slider_1" class="tabcontent">

            <div class="left">
                <div class="tabheading">
                    <p>Heading</p>
                </div>

                <div class="slidertab">
                    <?php echo do_shortcode('[smartslider3 slider=14]');?>
                </div>


            </div>


            <div class="right">
                <div class="tabheading">
                    <p>Heading</p>
                </div>

                <div class="texttab">
                    <h4 class="rightheading">Content1</h4>
                    <p class="righttext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
                        in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <a href="#" class="button_learnmore">Learn more.</a>
                </div>

            </div>

        </div>

        <div id="hp_slider_2" class="tabcontent">
            <h3>Paris</h3>
            <p>Paris is the capital of France.</p>
        </div>

        <div id="hp_slider_3" class="tabcontent">
            <h3>Tokyo</h3>
            <p>Tokyo is the capital of Japan.</p>
        </div>

        <div id="hp_slider_4" class="tabcontent">
            <h3>fourth</h3>
            <p>Hello.</p>
        </div>





        <div class="tab">
            <button class="tablinks" onclick="openCity(event, 'hp_slider_1')">Button1 </button>

            <button class="tablinks" onclick="openCity(event, 'hp_slider_2')">Button2</button>

            <button class="tablinks" onclick="openCity(event, 'hp_slider_3')">Button3</button>

            <button class="tablinks" onclick="openCity(event,'hp_slider_4')">Button4</button>
        </div>



    </div>

Answer 3

You can use the style clear:all on a div, which means that it appears below the previous div(s). Or you can use the tag <br clear="all"> which does basically the same.