elements not on the same height in a-CodePudding

I have a navbar containing two divs for 'nav-left' and 'nav-right'. I want to float them left and right plus have the sticky position.

The elements in the navbar are not of the same height. The left elements are up and the right elements are down. I need them to be vertically centered.

 nav {
  position: sticky;
  width: 100%;
  background: green;
  margin: 0;
  padding: 0;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;

}

nav a {
  display: inline-block;
  width: 60px;
  text-decoration: none;
}

.nav-left li {
  float: left;
}

.nav-right li {
  float: right;
}

<header >
<nav >
  <div >
    <ul>
      <li><a href="#">Blah</a></li>
      <li><a href="#">Blah</a></li>
      <li><a href="#">Blah</a></li>
    </ul>
  </div>
  <div >
    <ul>
      <li><a href="#">Bloh</a></li>
      <li><a href="#">Bloh</a></li>
    </ul>
  </div>
</nav>

CodePudding user response：

Instead of using floats here, you better add display: flex; and justify-content: space-between; to distribute these two uls left and right. You also need to add nav ul li { display: inline-block; } to display these lists horizontally in this case.

(Use top and bottom padding on the navbar if you want it to be higher)

nav {
  position: sticky;
  width: 100%;
  background: green;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

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

nav ul li {
  display: inline-block;
}

nav a {
  display: inline-block;
  width: 60px;
  text-decoration: none;
}

<header >
  <nav >
    <div >
      <ul>
        <li><a href="#">Blah</a></li>
        <li><a href="#">Blah</a></li>
        <li><a href="#">Blah</a></li>
      </ul>
    </div>
    <div >
      <ul>
        <li><a href="#">Bloh</a></li>
        <li><a href="#">Bloh</a></li>
      </ul>
    </div>
  </nav>

CodePudding user response：

The problems is that <ul> and <div> elements are Block-level Elements.

A better approach is to use flexblox.

Similar to the other answers but without the <ul> and <li> elements (would be a flexbox in a flexbox). I am using also using display: flex; with justify-content: space-between;.

I have added align-self: flex-end; to right-align items and use a margin to keep the distance between nav items.

Stripped of all irrelevant parts for clarity.

My favorite site to check flexbox from time to time: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

nav {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  list-style-type: none;
}

nav a {
  text-decoration: none;
  margin: 10px;
}

.nav-right {
  align-self: flex-end;
}

<header >
<nav >
  <div>
    <a href="#">Blah</a>
    <a href="#">Blah</a>
    <a href="#">Blah</a>
  </div>
  <div >
    <a href="#">Bloh</a>
    <a href="#">Bloh</a>
  </div>
</nav>

CodePudding user response：

It is better to use flexbox

nav {
    display: flex;
    justify-content: space-between;
    position: sticky;
    width: 100%;
    height: 3rem;
    background: green;
    margin: 0;
    padding: 0;

  }
  nav ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 1rem;
    overflow: hidden;
    position: relative;
  }
  
  nav a {
    width: 60px;
    align-items: center;
    text-decoration: none;
    padding: 1rem;
  }

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <header >
        <nav >
          <div >
            <ul>
              <li><a href="#">Blah</a></li>
              <li><a href="#">Blah</a></li>
              <li><a href="#">Blah</a></li>
            </ul>
          </div>
          <div >
            <ul>
              <li><a href="#">Bloh</a></li>
              <li><a href="#">Bloh</a></li>
            </ul>
          </div>
        </nav>
</body>
</html>