A button gets out of the div

May 13, 2022

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.

>Solution :

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>