'A button gets out of the div

I have the following navbar -

#navbar {
  width: 100%;
  position: fixed;
  height: 50px;
  z-index: 1 !important;
  top: 0px;
  background-color: #20b7c2;
}

#Name {
  padding: 0px !important;
  top: 0px;
}

.openbtn {
  background-color: #20b7c2;
  height: 50px;
  cursor: pointer;
  margin-right: 0px;
  border: 1px white solid;
  border-radius: 0px;
  width: 50px !important;
  padding: 0px;
  font-size: 25px;
}

.navbarButtons1 {
  background-color: #20b7c2;
  color: white;
  border: 0px;
  cursor: Default;
  vertical-align: middle;
  height: 50px;
  top: 0;
  width: 100px;
  position: relative;
  font-size: 15px;
}
<div id="navbar">
  <button class="openbtn" onclick="openNav()">&#9776;</button>
  <input class="navbarButtons1" type="button" value="Test" id="Name">
</div>

In it, the second button with the value "test" just overflows out of the div for no reason at all. I tried some things but they did not work. How to fix it? Thanks in advance.

htmlcss


Solution 1:[1]

Just add float: left to each button.

#navbar {
  width: 100%;
  position: fixed;
  height: 50px;
  z-index: 1 !important;
  top: 0px;
  background-color: #20b7c2;
}

#Name {
  padding: 0px !important;
  top: 0px;
  float: left;
}

.openbtn {
  background-color: #20b7c2;
  height: 50px;
  cursor: pointer;
  margin-right: 0px;
  border: 1px white solid;
  border-radius: 0px;
  width: 50px !important;
  padding: 0px;
  font-size: 25px;
  float: left;
}

.navbarButtons1 {
  background-color: #20b7c2;
  color: white;
  border: 0px;
  cursor: Default;
  vertical-align: middle;
  height: 50px;
  top: 0;
  width: 100px;
  position: relative;
  font-size: 15px;
}
<div id="navbar">
  <button class="openbtn" onclick="openNav()">&#9776;</button>
  <input class="navbarButtons1" type="button" value="Test" id="Name">
</div>

Solution 2:[2]

Use display flex

#navbar {
  width: 100%;
  position: fixed;
  height: 50px;
  z-index: 1 !important;
  top: 0px;
  background-color: #20b7c2;
  display: flex;
  align-items: center;
}

#Name {
  padding: 0px !important;
  top: 0px;
}

.openbtn {
  background-color: #20b7c2;
  height: 50px;
  cursor: pointer;
  margin-right: 0px;
  border: 1px white solid;
  border-radius: 0px;
  width: 50px !important;
  padding: 0px;
  font-size: 25px;
}

.navbarButtons1 {
  background-color: #20b7c2;
  color: white;
  border: 0px;
  cursor: Default;
  height: 50px;
  top: 0;
  width: 100px;
  position: relative;
  font-size: 15px;
  margin: 0;
}
<div id="navbar">
  <button class="openbtn" onclick="openNav()">&#9776;</button>
  <input class="navbarButtons1" type="button" value="Test" id="Name">
</div>

Solution 3:[3]

Remove vertical-align: middle; and use display: flex; on your parent #navbar element instead .

Using vertical-align: top; is not the best solution.
Also, make sure to use the right height values, or rather don't set heights at all.

Example:

const toggleMenu = () => {
  console.log("toggle menu!");
};

document.querySelectorAll(".openbtn").forEach(el => {
  el.addEventListener("click", toggleMenu);
});
/* QuickReset */ * {margin: 0; box-sizing: border-box;}

:root {
  --color-primary: #20b7c2;
}

#navbar {
  width: 100%;
  position: fixed;
  top: 0px;
  height: 50px;
  z-index: 1; /*!important should never be used.Just as a last resort.Study CSS specificity instead*/
  background-color: var(--color-primary);
  display: flex;
}

button {
  background-color: var(--color-primary);
  color: #fff;
  border: 0;
  padding: 0 1rem;
  cursor: pointer;
}

.openbtn {
  border-right: 1px white solid;
}
<div id="navbar">
  <button type="button" class="openbtn">&#9776; <!-- STOP using inline onclick handlers. --></button>
  <button type="button">Test</button>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Archit Gargi
Solution 2 kennarddh
Solution 3

Related Questions