Why are my buttons moving down on the page?

Question

I am trying to make a navigation bar on my website. I have tried changing the display type of the element holding the buttons, but nothing happens. The main thing I am doing is centering those buttons in the middle of the navbar. What should I do to make it look more natural? Thanks in advance.

Apparently I have to have more sentences too so this is a sentence. This is another sentence. This is another one.

/* import fonts */
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto:300');

html, body {
  margin: 0;
  background-color: rgb(236, 240, 241);
}

button:focus {
  outline:0;
}

.mainBlock {
  background-color: rgb(29,49,49);
}

.mainBlock h1 {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 48pt;
  padding-top: 20px;
  margin-bottom: 0;
  padding-bottom: 0;
  color: rgb(236, 240, 241);
  margin-top: 0;
}

.mainBlock h3 {
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 18pt;
  color: rgb(236, 240, 241);
  margin-bottom: 50px;
}
/* big button styles */
.mainButtons {
  text-align: center;
}

.mainButtons input[type=submit] {
  font-family: 'Open Sans', sans-serif;
  font-size: 15pt;
  text-align: center;
  border: none;
  width: 200px;
  height: 40px;
  margin: 10px;
  border-radius: 3px;
  color: rgba(255, 255, 255, 1);
  position: static;
  cursor: pointer;
  transition: all 0.1s ease-out;
}

#browse {
  background-color: rgb(41, 128, 185);
  box-shadow: 0 10px 0 0 rgb(53, 93, 158);
}

#browse:hover {
  box-shadow: 0 7px 0 0 rgb(53, 93, 158);
}

#create {
  background-color: rgb(231, 76, 60);
  box-shadow: 0 10px 0 0 rgb(192, 57, 43);
  margin-bottom: 42px;
}

#create:hover {
  box-shadow: 0 7px 0 0 rgb(192, 57, 43);
}

button:focus, input[type="submit"]:focus {
  outline:0;
}

#navlistcontainer {
  float: right;
  padding-right: 10px;
}

#nav {
  background-color: rgb(26, 188, 156);
  font-family: 'Open Sans', sans-serif;
  padding-top: 20px;
  padding-bottom: 20px;
}

#homelink {
  text-decoration: none;
  color: white;
  background-color: rgb(22, 160, 133);
  margin-left: 10px;
  padding: 10px;
}

#login {
  margin-left: 10px;
}

.navbaritem {
  border-radius: 100px;
  border: none;
  height: 40px;
  width: 100px;
  box-shadow: 0 3px 7px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  color: white;
  background-color: rgb(52, 73, 94);
  transition: all 0.1s ease-out;
}

.navbaritem:hover {
    box-shadow: 0 5px 10px 4px rgba(0, 0, 0, 0.2);
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Debater</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <!-- Include NavBar -->
<link href="components/navbar.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav id="nav">
  <a href="index.html" id="homelink"><i class="fa fa-home fa-lg" aria-hidden="true"></i> Home</a>
  <div id="navlistcontainer">
    <a href="signup.php"><button class="navbaritem" id="signup">SIGNUP</button></a>
    <a href="login.php"><button class="navbaritem" id="login">LOGIN</button></a>
  </div>
</nav>

    <!-- Big Main Page Block -->
    <div class="mainBlock">
      <h1>Welcome to site</h1>
      <h3>siteinfo<br>
          moreinfo</h3>
      <div class="buttonsWrapper">
        <form class="mainButtons">
          <input type="submit" value="Basdasds" id="browse">
          <input type="submit" value="Cs" id="create" formaction="debate.php">
        </form> <!-- Ends the buttons form -->
      </div> <!-- Ends buttons wrapper -->
    </div>
  </body>
</html>

score 1 · Accepted Answer · answered Dec 21 '17 at 04:34

I think part of the problem you're having is that your nav doesn't contain the height of its children because the buttons to the right are floated. In order to solve that problem, you can clearfix it.

With the nav clearfixed, the 20px top and bottom padding will actually sit evenly around the buttons. Then you can fix the misalignment of the home link on the left by changing it to display: inline-block.

/* import fonts */

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto:300');
html,
body {
  margin: 0;
  background-color: rgb(236, 240, 241);
}

.clearfix::after { /* THIS IS NEW */
  content: '';
  display: table;
  clear: both;
}

button:focus {
  outline: 0;
}

.mainBlock {
  background-color: rgb(29, 49, 49);
}

.mainBlock h1 {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 48pt;
  padding-top: 20px;
  margin-bottom: 0;
  padding-bottom: 0;
  color: rgb(236, 240, 241);
  margin-top: 0;
}

.mainBlock h3 {
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 18pt;
  color: rgb(236, 240, 241);
  margin-bottom: 50px;
}


/* big button styles */

.mainButtons {
  text-align: center;
}

.mainButtons input[type=submit] {
  font-family: 'Open Sans', sans-serif;
  font-size: 15pt;
  text-align: center;
  border: none;
  width: 200px;
  height: 40px;
  margin: 10px;
  border-radius: 3px;
  color: rgba(255, 255, 255, 1);
  position: static;
  cursor: pointer;
  transition: all 0.1s ease-out;
}

#browse {
  background-color: rgb(41, 128, 185);
  box-shadow: 0 10px 0 0 rgb(53, 93, 158);
}

#browse:hover {
  box-shadow: 0 7px 0 0 rgb(53, 93, 158);
}

#create {
  background-color: rgb(231, 76, 60);
  box-shadow: 0 10px 0 0 rgb(192, 57, 43);
  margin-bottom: 42px;
}

#create:hover {
  box-shadow: 0 7px 0 0 rgb(192, 57, 43);
}

button:focus,
input[type="submit"]:focus {
  outline: 0;
}

#navlistcontainer {
  float: right;
  padding-right: 10px;
}

#nav {
  background-color: rgb(26, 188, 156);
  font-family: 'Open Sans', sans-serif;
  padding-top: 20px;
  padding-bottom: 20px;
}

#homelink {
  text-decoration: none;
  color: white;
  background-color: rgb(22, 160, 133);
  margin-left: 10px;
  padding: 10px;
  display: inline-block; /* THIS IS NEW */
}

#login {
  margin-left: 10px;
}

.navbaritem {
  border-radius: 100px;
  border: none;
  height: 40px;
  width: 100px;
  box-shadow: 0 3px 7px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  color: white;
  background-color: rgb(52, 73, 94);
  transition: all 0.1s ease-out;
}

.navbaritem:hover {
  box-shadow: 0 5px 10px 4px rgba(0, 0, 0, 0.2);
}

<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav id="nav" class="clearfix"> <!-- CLEARFIX CLASS ADDED TO #NAV -->
  <a href="index.html" id="homelink"><i class="fa fa-home fa-lg" aria-hidden="true"></i> Home</a>
  <div id="navlistcontainer">
    <a href="signup.php"><button class="navbaritem" id="signup">SIGNUP</button></a>
    <a href="login.php"><button class="navbaritem" id="login">LOGIN</button></a>
  </div>
</nav>

<!-- Big Main Page Block -->
<div class="mainBlock">
  <h1>Welcome to site</h1>
  <h3>siteinfo<br> moreinfo
  </h3>
  <div class="buttonsWrapper">
    <form class="mainButtons">
      <input type="submit" value="Basdasds" id="browse">
      <input type="submit" value="Cs" id="create" formaction="debate.php">
    </form>
    <!-- Ends the buttons form -->
  </div>
  <!-- Ends buttons wrapper -->
</div>

Another option is that you can use a flex display. That'll make sure your nav always contains its children, but it's a different way of doing things. With a flex display, floats don't do anything, so you have to find a different way to align your stuff to the right and left edges of the page. justify-content: space-between will do you nicely there.

/* import fonts */

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto:300');
html,
body {
  margin: 0;
  background-color: rgb(236, 240, 241);
}

button:focus {
  outline: 0;
}

.mainBlock {
  background-color: rgb(29, 49, 49);
}

.mainBlock h1 {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 48pt;
  padding-top: 20px;
  margin-bottom: 0;
  padding-bottom: 0;
  color: rgb(236, 240, 241);
  margin-top: 0;
}

.mainBlock h3 {
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 18pt;
  color: rgb(236, 240, 241);
  margin-bottom: 50px;
}


/* big button styles */

.mainButtons {
  text-align: center;
}

.mainButtons input[type=submit] {
  font-family: 'Open Sans', sans-serif;
  font-size: 15pt;
  text-align: center;
  border: none;
  width: 200px;
  height: 40px;
  margin: 10px;
  border-radius: 3px;
  color: rgba(255, 255, 255, 1);
  position: static;
  cursor: pointer;
  transition: all 0.1s ease-out;
}

#browse {
  background-color: rgb(41, 128, 185);
  box-shadow: 0 10px 0 0 rgb(53, 93, 158);
}

#browse:hover {
  box-shadow: 0 7px 0 0 rgb(53, 93, 158);
}

#create {
  background-color: rgb(231, 76, 60);
  box-shadow: 0 10px 0 0 rgb(192, 57, 43);
  margin-bottom: 42px;
}

#create:hover {
  box-shadow: 0 7px 0 0 rgb(192, 57, 43);
}

button:focus,
input[type="submit"]:focus {
  outline: 0;
}

#navlistcontainer {
  /*float: right;*/ /* WE DON'T NEED THIS ANY MORE */
  padding-right: 10px;
}

#nav {
  background-color: rgb(26, 188, 156);
  font-family: 'Open Sans', sans-serif;
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex; /* NEW */
  justify-content: space-between; /* NEW */
}

#homelink {
  text-decoration: none;
  color: white;
  background-color: rgb(22, 160, 133);
  margin-left: 10px;
  padding: 10px;
}

#login {
  margin-left: 10px;
}

.navbaritem {
  border-radius: 100px;
  border: none;
  height: 40px;
  width: 100px;
  box-shadow: 0 3px 7px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  color: white;
  background-color: rgb(52, 73, 94);
  transition: all 0.1s ease-out;
}

.navbaritem:hover {
  box-shadow: 0 5px 10px 4px rgba(0, 0, 0, 0.2);
}

<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav id="nav" class="clearfix">
  <a href="index.html" id="homelink"><i class="fa fa-home fa-lg" aria-hidden="true"></i> Home</a>
  <div id="navlistcontainer">
    <a href="signup.php"><button class="navbaritem" id="signup">SIGNUP</button></a>
    <a href="login.php"><button class="navbaritem" id="login">LOGIN</button></a>
  </div>
</nav>

<!-- Big Main Page Block -->
<div class="mainBlock">
  <h1>Welcome to site</h1>
  <h3>siteinfo<br> moreinfo
  </h3>
  <div class="buttonsWrapper">
    <form class="mainButtons">
      <input type="submit" value="Basdasds" id="browse">
      <input type="submit" value="Cs" id="create" formaction="debate.php">
    </form>
    <!-- Ends the buttons form -->
  </div>
  <!-- Ends buttons wrapper -->
</div>

If you go the flex route, you could also kill the top and bottom padding on the nav and simply specify a height for it. Then, using the flex property align-items: center, your buttons will automatically vertically center themselves in the navbar.

/* import fonts */

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto:300');
html,
body {
  margin: 0;
  background-color: rgb(236, 240, 241);
}

button:focus {
  outline: 0;
}

.mainBlock {
  background-color: rgb(29, 49, 49);
}

.mainBlock h1 {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 48pt;
  padding-top: 20px;
  margin-bottom: 0;
  padding-bottom: 0;
  color: rgb(236, 240, 241);
  margin-top: 0;
}

.mainBlock h3 {
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 18pt;
  color: rgb(236, 240, 241);
  margin-bottom: 50px;
}


/* big button styles */

.mainButtons {
  text-align: center;
}

.mainButtons input[type=submit] {
  font-family: 'Open Sans', sans-serif;
  font-size: 15pt;
  text-align: center;
  border: none;
  width: 200px;
  height: 40px;
  margin: 10px;
  border-radius: 3px;
  color: rgba(255, 255, 255, 1);
  position: static;
  cursor: pointer;
  transition: all 0.1s ease-out;
}

#browse {
  background-color: rgb(41, 128, 185);
  box-shadow: 0 10px 0 0 rgb(53, 93, 158);
}

#browse:hover {
  box-shadow: 0 7px 0 0 rgb(53, 93, 158);
}

#create {
  background-color: rgb(231, 76, 60);
  box-shadow: 0 10px 0 0 rgb(192, 57, 43);
  margin-bottom: 42px;
}

#create:hover {
  box-shadow: 0 7px 0 0 rgb(192, 57, 43);
}

button:focus,
input[type="submit"]:focus {
  outline: 0;
}

#navlistcontainer {
  /*float: right;*/ /* WE DON'T NEED THIS ANY MORE */
  padding-right: 10px;
}

#nav {
  background-color: rgb(26, 188, 156);
  font-family: 'Open Sans', sans-serif;
  /*padding-top: 20px;*/ /* WE DON'T NEED THIS ANY MORE */
  /*padding-bottom: 20px;*/ /* WE DON'T NEED THIS ANY MORE */
  height: 80px; /* NEW */
  display: flex; /* NEW */
  justify-content: space-between; /* NEW */
  align-items: center; /* NEW*/
}

#homelink {
  text-decoration: none;
  color: white;
  background-color: rgb(22, 160, 133);
  margin-left: 10px;
  padding: 10px;
}

#login {
  margin-left: 10px;
}

.navbaritem {
  border-radius: 100px;
  border: none;
  height: 40px;
  width: 100px;
  box-shadow: 0 3px 7px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  color: white;
  background-color: rgb(52, 73, 94);
  transition: all 0.1s ease-out;
}

.navbaritem:hover {
  box-shadow: 0 5px 10px 4px rgba(0, 0, 0, 0.2);
}

<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav id="nav" class="clearfix">
  <a href="index.html" id="homelink"><i class="fa fa-home fa-lg" aria-hidden="true"></i> Home</a>
  <div id="navlistcontainer">
    <a href="signup.php"><button class="navbaritem" id="signup">SIGNUP</button></a>
    <a href="login.php"><button class="navbaritem" id="login">LOGIN</button></a>
  </div>
</nav>

<!-- Big Main Page Block -->
<div class="mainBlock">
  <h1>Welcome to site</h1>
  <h3>siteinfo<br> moreinfo
  </h3>
  <div class="buttonsWrapper">
    <form class="mainButtons">
      <input type="submit" value="Basdasds" id="browse">
      <input type="submit" value="Cs" id="create" formaction="debate.php">
    </form>
    <!-- Ends the buttons form -->
  </div>
  <!-- Ends buttons wrapper -->
</div>

score 0 · Answer 2 · answered Dec 21 '17 at 04:14

Removing the padding: 25px on #nav and replacing it with line-height: 50px will hopefully fix your issue. It looks like you thought that the buttons would be aligned by their text and not the button itself. The padding was pushing both buttons down 25px, not just their text.

Why are my buttons moving down on the page?

2 Answers2