CSS elements being pushed down

Question

I have two main elements inside #header-container which should be side-by-side. However, the first one (#header-logo) is being pushed down by the navigation menu buttons inside #header-nav and I'm not sure why. I don't want to fix it by hiding the overflow, I want to understand why the #header-logo element is being pushed down in the first place.

What is this happening?

#header-container {
  position: fixed;
  height: 55px;
  width: 100%;
  color: #FFFFFF;
  font-size: 0;
  background: rgba(0, 168, 225, 0.25);
}
#header-logo {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 45%;
  margin: 0;
  padding: 0;
  font-size: 22px;
  background-color: #CCCCCC;
  /*debug*/
}
#header-nav {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 55%;
  margin: 0;
  padding: 0;
  font-size: 22px;
  background: linear-gradient(to right, rgba(0, 168, 225, 0.7) 0%, rgba(0, 45, 91, 0.8) 60%);
}
#logo-container {} #nav-container {
  height: 55px;
  width: 95%;
  font-size: 22px;
  color: #FFFFFF;
  text-align: center:
}
ul.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
ul.nav li {
  height: 100%;
  float: right;
}
ul.nav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}
ul.nav li a:hover {
  border-bottom: solid #ff0000;
}

<div id="header-container">
  <div id="header-logo">Logo</div>
  <div id="header-nav">
    <div id="nav-container">
      <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </div>
  </div>
</div>

View on JSFiddle

score 2 · Accepted Answer · answered Aug 02 '16 at 19:06

The default vertical alignment of inline elements is baseline, which is what you're seeing. Change the #header-logo CSS to include vertical-align:top;

#header-container {
  position: fixed;
  height: 55px;
  width: 100%;
  color: #FFFFFF;
  font-size: 0;
  background: rgba(0, 168, 225, 0.25);
}

#header-logo {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 45%;
  margin: 0;
  padding: 0;
  font-size: 22px;
  background-color: #CCCCCC;
  vertical-align:top;
}

#header-nav {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 55%;
  margin: 0;
  padding: 0;
  font-size: 22px;
  background: linear-gradient(to right, rgba(0, 168, 225, 0.7) 0%, rgba(0, 45, 91, 0.8) 60%);
}

#logo-container {}

#nav-container {
  height: 55px;
  width: 95%;
  font-size: 22px;
  color: #FFFFFF;
  text-align: center:
}

ul.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

ul.nav li {
  height: 100%;
  float: right;
}

ul.nav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

ul.nav li a:hover {
  border-bottom: solid #ff0000;
}

<div id="header-container">
  <div id="header-logo">
    Logo
  </div>

  <div id="header-nav">
    <div id="nav-container">
      <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </div>
  </div>
</div>

CSS elements being pushed down

1 Answers1