I'm looking for help, I can't move the div of the logout inside of navigator; I want it to be at the end/bottom of my navigator. Please, I'm also curious what is the solution.

Thank you, I will provide my source code and and image.

Image of navigation:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.container {
  display: flex;
  min-height: 100vh;
  height: 100%;
  width: 100%;
}

.nav {
  display: flex;
  flex-direction: column;
  background-color: blueviolet;
  width: 200px;
  height: 100%;
  min-height: 100vh;
  padding: 0 15px 0 15px;
}

.logo-container {
  margin: 40px 0 40px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-container img {
  height: 75px;
}

.nav ul {
  padding: 0;
}

.nav li {
  display: flex;
  list-style: none;
  margin-bottom: 10px;
  padding: 10px;
}

.nav li:hover {
  background-color: rgb(19, 19, 19);
  border-radius: 10px;
  transform: scale(1.05);
}

.nav li a {
  text-decoration: none;
  color: white;
  padding-left: 15px;
}

.nav .logout_nav {
  background-color: black;
  justify-content: center;
  /* Center the text */
  padding: 20px 0;
  /* Add some padding for spacing */
  color: white;
  /* Set text color */
}

.content {
  display: flex;
}

<div class="container">
  <div class="nav">
    <div class="logo-container">
      <img src="/IMAGES/FM_LOGO.png" alt="LOGO" >
    </div>
    <nav>
      <ul>
        <li><a href="#">Dashoard</a></li>
        <li><a href="#">Request/Report</a></li>
        <li><a href="#">Thread</a></li>
        <li><a href="#">Item List</a></li>
        <li><a href="#">Claim Item</a></li>
        <li><a href="#">Admin Panel </a></li>
      </ul>
      <div class="logout_nav">
        <p>Lost and Found System</p>
      </div>
    </nav>
  </div>
  <div class="content">
    <h1>Dashboard</h1>
  </div>
</div>

I'm looking for help, I can't move the div of the logout inside of navigator; I want it to be at the end/bottom of my navigator. Please, I'm also curious what is the solution.

Thank you, I will provide my source code and and image.

Image of navigation:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.container {
  display: flex;
  min-height: 100vh;
  height: 100%;
  width: 100%;
}

.nav {
  display: flex;
  flex-direction: column;
  background-color: blueviolet;
  width: 200px;
  height: 100%;
  min-height: 100vh;
  padding: 0 15px 0 15px;
}

.logo-container {
  margin: 40px 0 40px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-container img {
  height: 75px;
}

.nav ul {
  padding: 0;
}

.nav li {
  display: flex;
  list-style: none;
  margin-bottom: 10px;
  padding: 10px;
}

.nav li:hover {
  background-color: rgb(19, 19, 19);
  border-radius: 10px;
  transform: scale(1.05);
}

.nav li a {
  text-decoration: none;
  color: white;
  padding-left: 15px;
}

.nav .logout_nav {
  background-color: black;
  justify-content: center;
  /* Center the text */
  padding: 20px 0;
  /* Add some padding for spacing */
  color: white;
  /* Set text color */
}

.content {
  display: flex;
}

<div class="container">
  <div class="nav">
    <div class="logo-container">
      <img src="/IMAGES/FM_LOGO.png" alt="LOGO" >
    </div>
    <nav>
      <ul>
        <li><a href="#">Dashoard</a></li>
        <li><a href="#">Request/Report</a></li>
        <li><a href="#">Thread</a></li>
        <li><a href="#">Item List</a></li>
        <li><a href="#">Claim Item</a></li>
        <li><a href="#">Admin Panel </a></li>
      </ul>
      <div class="logout_nav">
        <p>Lost and Found System</p>
      </div>
    </nav>
  </div>
  <div class="content">
    <h1>Dashboard</h1>
  </div>
</div>

I also tried to put position: relative to .nav and position: absolute in .logout_nav and it does nothing,

• html
• css
• navigator

2 Answers 2

Since the div.nav element is already display: flex as a column, first you'll want the <nav> element to take up the remaining height so its contents can stretch for that height. You can do that with:

nav {
  flex-grow: 1;
}

From there, the <nav> itself can also be display: flex as a column, and then you can justify its contents (which are only a <ul> and a <div>) to maximize the space between them:

nav {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

For example (you may need to expand to full-screen):

*  {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.container {
    display: flex;
    min-height: 100vh;
    height: 100%;
    width: 100%;
}

.nav {
    display: flex;
    flex-direction: column;
    background-color: blueviolet;
    width:200px;
    height: 100%;
    min-height: 100vh;
    padding: 0 15px 0 15px;
}

.logo-container {
    margin: 40px 0 40px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-container img {
    height: 75px;
}

.nav ul{
    padding: 0;
}

.nav li {
    display: flex;
    list-style: none;
    margin-bottom: 10px;
    padding: 10px;
}

.nav li:hover {
    background-color: rgb(19, 19, 19);
    border-radius: 10px;
    transform: scale(1.05);
}

.nav li a {
    text-decoration: none;
    color: white;
    padding-left: 15px;
}

.nav .logout_nav {
    background-color: black;
    justify-content: center; /* Center the text */
    padding: 20px 0; /* Add some padding for spacing */
    color: white; /* Set text color */
}

.content {
    display: flex;
}

nav {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<div class="container">
  <div class="nav">
    <div class="logo-container">
      <img src="/IMAGES/FM_LOGO.png" alt="LOGO" >
    </div>
    <nav>
      <ul>
        <li><a href="#">Dashoard</a></li>
        <li><a href="#">Request/Report</a></li>
        <li><a href="#">Thread</a></li>
        <li><a href="#">Item List</a></li>
        <li><a href="#">Claim Item</a></li>
        <li><a href="#">Admin Panel </a></li>   
      </ul>
      <div class="logout_nav">
        <p>Lost and Found System</p>
      </div>
    </nav>
  </div>
  <div class="content">
    <h1>Dashboard</h1>
  </div>
</div>

You need to take out the block with the button, that is, make 3 elements and put flex: 1 1 0; for navigation so that it takes up the entire height

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.container {
  display: flex;
  min-height: 100vh;
  height: 100%;
  width: 100%;
}

.nav {
  display: flex;
  flex-direction: column;
  background-color: blueviolet;
  width: 200px;
  height: 100%;
  min-height: 100vh;
  padding: 0 15px 0 15px;
}

.logo-container {
  margin: 40px 0 40px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-container img {
  height: 75px;
}

nav {
  flex: 1 1 0;
}

.nav ul {
  padding: 0;
}

.nav li {
  display: flex;
  list-style: none;
  margin-bottom: 10px;
  padding: 10px;
}

.nav li:hover {
  background-color: rgb(19, 19, 19);
  border-radius: 10px;
  transform: scale(1.05);
}

.nav li a {
  text-decoration: none;
  color: white;
  padding-left: 15px;
}

.nav .logout_nav {
  background-color: black;
  justify-content: center;
  /* Center the text */
  padding: 20px 0;
  /* Add some padding for spacing */
  color: white;
  /* Set text color */
}

.content {
  display: flex;
}

<div class="container">
  <div class="nav">
    <div class="logo-container">
      <img src="/IMAGES/FM_LOGO.png" alt="LOGO" >
    </div>
    <nav>
      <ul>
        <li><a href="#">Dashoard</a></li>
        <li><a href="#">Request/Report</a></li>
        <li><a href="#">Thread</a></li>
        <li><a href="#">Item List</a></li>
        <li><a href="#">Claim Item</a></li>
        <li><a href="#">Admin Panel </a></li>
      </ul>
    </nav>
    <div class="logout_nav">
        <p>Lost and Found System</p>
      </div>
  </div>
  <div class="content">
    <h1>Dashboard</h1>
  </div>
</div>