Why do my buttons move up and down when I click on them?

January 6, 2022

I have two drop-down buttons where the Difficulty button will make the Duration button move to the bottom when you click on it; likewise if you click on the Duration button it will move the Difficulty button to the bottom.

What’s interesting is when the Difficulty button is clicked first, then the Duration button, both will be the proper height; but if you click the Duration button first, then the Difficulty button, only the Duration button will close its contents and move to the bottom again. This is what my code looks like:

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style_MP.css"/>
</head>

<body>
<div class="main_page">
    <h1>Welcome to My Typing Test!</h1>
    <h2>Select Your Difficulty and Duration</h2>
<div>



    <!--Below, the word "diff" is short for "difficulty" -->
    <!--So "diff-settings" means "difficulty settings" -->
    <!--"diff-options" means "difficulty options" and so on -->
    
<div class="difficulty">
  <button onclick="myfunction01()" class="diff-settings">Difficulty</button>
  <div class="diff-options" id="diff-select">
    <a href="beginner">Beginner</a>
    <a href="intermediate">Intermediate</a>
    <a href="advanced">Advanced</a>
    <a href="expert">Expert</a>
  </div>
</div>

<div class="duration">
  <button onclick="myfunction02()" class="duration-settings">Duration</button>
  <div class="duration-options" id="duration-select">
    <a href="30-seconds">30 Seconds</a>
    <a href="60-seconds">60 Seconds</a>
    <a href="120-seconds">120 Seconds</a>
    <a href="custom">Custom</a>
  </div>
</div>



<script src="script_MP.js"></script>
</body>
</html>

CSS Code:

body{background-color:grey}

.main_page{text-align: center;}

h1{font-size: 50px;}

h2{font-size: 30px; padding-bottom: 40px;}

.difficulty , .duration{
display: inline-block;
margin: 5px;
}


    /* This section is for the Difficulty Button only */

.diff-settings{
padding: 20px;
position: relative;
border: none;
box-shadow: none;
background-color: green;
color:white;
font-size: 20px;
width: 130px;
}


.diff-settings:hover, .diff-settings:focus{
background-color:darkgreen;
color:white;
cursor: pointer;
}


.diff-options{
display: none;
font-size: 20px;
width: 130px;
}

.diff-options a{
background-color: green;
color: white;
display: block;
padding: 8px;
text-decoration: none;
}

.diff-options a:hover {background-color: darkgreen;}

.show {display: block;}

    

    /* This section is for the Duration Button only */

.duration-settings{
padding: 20px;
border: none;
box-shadow: none;
background-color: green;
color:white;
font-size: 20px;
width: 130px;
}
    
    
.duration-settings:hover, .duration-settings:focus{
background-color:darkgreen;
color:white;
cursor: pointer;
}
    
    
.duration-options{
display: none;
font-size: 20px;
width: 130px;
}
    
.duration-options a{
background-color: green;
color: white;
display: block;
padding: 8px;
text-decoration: none;
}
    
.duration-options a:hover {background-color: darkgreen;}
    
.show {display: block;}

What should I change in order to stop both buttons from moving to the bottom when they’re clicked?

>Solution :

Just add this 😉 :

.diff-options, .duration-options {
  position: absolute;
}

When you change the display of a block it was taken into account and moved the following elements. By adding an absolute position, it is no longer taken into account for the calculation of the next element.