Search code examples
htmlcssflexbox

Positionioning nav-bar on the right side of the section

.middle-site-content-container {
  width: auto;
  height: auto;
  border: 2px red solid;
  display: flex;
  /*Le pot pozitiona in line*/
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
  margin: auto;
}

.middle-site-content-1,
.middle-site-content-2,
.middle-site-content-3,
.middle-site-content-4,
.middle-site-content-5,
.middle-site-content-6 {
  height: auto;
  width: auto;
  margin: 2rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  background-color: #f2f2f2;
  color: #333;
}

.middle-site-content-1 {
  border: red 2px solid;
}

section.middle-site-content-container img {
  display: block;
  max-width: 24rem;
  max-height: 15rem;
  height: auto;
  width: auto;
  margin: auto;
}

section.middle-site-content-container h1 {
  padding: 1rem;
  height: auto;
  margin: auto;
  max-width: 24rem;
  max-height: 15rem;
}

section.middle-site-content-container p {
  padding: 0.5rem 0.1rem 0.3rem 1.5rem;
  text-align: left;
  max-width: 24rem;
  max-height: 10rem;
  height: auto;
  margin: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.middle-site-content-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.middle-site-content-1,
.middle-site-content-2,
.middle-site-content-3,
.middle-site-content-4,
.middle-site-content-5,
.middle-site-content-6 {
  flex: 1 1 30rem;
  margin: 2rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  background-color: #f2f2f2;
  color: #333;
}

.middle-site-content-1 {
  border: 2px solid red;
}

.middle-site-content-container img {
  max-width: 100%;
  max-height: 15rem;
  margin: auto;
}

.middle-site-content-container h1 {
  padding: 1rem;
  margin: 1rem 0;
}

.middle-site-content-container p {
  padding: 0.5rem 0.1rem 0.3rem 1.5rem;
  text-align: left;
  max-height: 10rem;
  margin: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-bar-container-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 2rem;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

nav ul li {
  margin-left: 1rem;
}
<section class="middle-site-content-container">


  <div class="middle-site-content-1">
    <img src="eldenring-patchnotes-v109.jpg" alt="patch notes img">
    <h1>ELDEN RING PATCH NOTES </h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil minus eveniet ipsam culpa sint ducimus, corporis impedit veniam ipsa quas dignissimos modi, dolor aliquam nemo nulla itaque adipisci unde aspernatur.</p>
  </div>

  <div class="middle-site-content-2">
    <img src="eldenring-patchnotes-v109.jpg" alt="patch notes img">
    <h1>Valorant Patch notes </h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil minus eveniet ipsam culpa sint ducimus, corporis impedit veniam ipsa quas dignissimos modi, dolor aliquam nemo nulla itaque adipisci unde aspernatur.</p>
  </div>

  <div class="middle-site-content-3">
    <img src="eldenring-patchnotes-v109.jpg" alt="patch notes img">
    <h1>CS go updates </h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil minus eveniet ipsam culpa sint ducimus, corporis impedit veniam ipsa quas dignissimos modi, dolor aliquam nemo nulla itaque adipisci unde aspernatur.</p>
  </div>

  <div class="middle-site-content-4">
    <img src="eldenring-patchnotes-v109.jpg" alt="patch notes img">
    <h1>Lol patch-notes </h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil minus eveniet ipsam culpa sint ducimus, corporis impedit veniam ipsa quas dignissimos modi, dolor aliquam nemo nulla itaque adipisci unde aspernatur.</p>
  </div>

  <div class="middle-site-content-5">
    <img src="eldenring-patchnotes-v109.jpg" alt="patch notes img">
    <h1>ELDEN RING PATCH NOTES </h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil minus eveniet ipsam culpa sint ducimus, corporis impedit veniam ipsa quas dignissimos modi, dolor aliquam nemo nulla itaque adipisci unde aspernatur.</p>
  </div>

  <div class="middle-site-content-6">
    <img src="eldenring-patchnotes-v109.jpg" alt="patch notes img">
    <h1>ELDEN RING PATCH NOTES </h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil minus eveniet ipsam culpa sint ducimus, corporis impedit veniam ipsa quas dignissimos modi, dolor aliquam nemo nulla itaque adipisci unde aspernatur.</p>
  </div>

  <div class="nav-bar-container-right">
    <nav>
      <ul>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>

      </ul>
    </nav>
  </div>



</section>

Inside the <section>, I want to place a nav-bar positioned on the right side of the section, which should be the only one positioned on the right side.

I am trying to position the side-bar on the right-hand side of a section that is somewhere in the middle of the HTML content. I am new to this field. Every method I found on the internet doesn't position the nav-bar on the right side only. I also tried using position: absolute, but it overlaps.

The layout I have:

Image

The layout I expected:

Image

Solution

  • Nest all the middle-site-content divs in their own .wrapper and flex that wrapper and use flex: 1;.

    Then declare a width for this new wrapper (I called it .middle-wrapper) as well as the .nav-bar-container-right.

    .middle-site-content-container {
  width: auto;
  height: auto;
  border: 2px red solid;
  margin: auto;
}

.middle-wrapper {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}

.middle-site-content-1,
.middle-site-content-2,
.middle-site-content-3,
.middle-site-content-4,
.middle-site-content-5,
.middle-site-content-6 {
  height: auto;
  width: auto;
  margin: 2rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  background-color: #f2f2f2;
  color: #333;
}

.middle-site-content-1 {
  border: red 2px solid;
}

section.middle-site-content-container img {
  display: block;
  max-width: 24rem;
  max-height: 15rem;
  height: auto;
  width: auto;
  margin: auto;
}

section.middle-site-content-container h1 {
  padding: 1rem;
  height: auto;
  margin: auto;
  max-width: 24rem;
  max-height: 15rem;
}

section.middle-site-content-container p {
  padding: 0.5rem 0.1rem 0.3rem 1.5rem;
  text-align: left;
  max-width: 24rem;
  max-height: 10rem;
  height: auto;
  margin: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.middle-site-content-container {
  display: flex;
  flex-wrap: wrap;
}

.middle-site-content-1,
.middle-site-content-2,
.middle-site-content-3,
.middle-site-content-4,
.middle-site-content-5,
.middle-site-content-6 {
  flex: 1 1 30rem;
  margin: 2rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  background-color: #f2f2f2;
  color: #333;
}

.middle-site-content-1 {
  border: 2px solid red;
}

.middle-site-content-container img {
  max-width: 100%;
  max-height: 15rem;
  margin: auto;
}

.middle-site-content-container h1 {
  padding: 1rem;
  margin: 1rem 0;
}

.middle-site-content-container p {
  padding: 0.5rem 0.1rem 0.3rem 1.5rem;
  text-align: left;
  max-height: 10rem;
  margin: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-bar-container-right {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10%;
  border: solid 2px green;
}

nav ul {
  list-style: none;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
}
    <section class="middle-site-content-container">
  <div class="middle-wrapper">
    <div class="middle-site-content-1">
      <img src="eldenring-patchnotes-v109.jpg" alt="patch notes img">
      <h1>ELDEN RING PATCH NOTES </h1>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil minus eveniet ipsam culpa sint ducimus, corporis impedit veniam ipsa quas dignissimos modi, dolor aliquam nemo nulla itaque adipisci unde aspernatur.</p>
    </div>
    <div class="middle-site-content-2">
      <img src="eldenring-patchnotes-v109.jpg" alt="patch notes img">
      <h1>Valorant Patch notes </h1>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil minus eveniet ipsam culpa sint ducimus, corporis impedit veniam ipsa quas dignissimos modi, dolor aliquam nemo nulla itaque adipisci unde aspernatur.</p>
    </div>
    <div class="middle-site-content-3">
      <img src="eldenring-patchnotes-v109.jpg" alt="patch notes img">
      <h1>CS go updates </h1>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil minus eveniet ipsam culpa sint ducimus, corporis impedit veniam ipsa quas dignissimos modi, dolor aliquam nemo nulla itaque adipisci unde aspernatur.</p>
    </div>
    <div class="middle-site-content-4">
      <img src="eldenring-patchnotes-v109.jpg" alt="patch notes img">
      <h1>Lol patch-notes </h1>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil minus eveniet ipsam culpa sint ducimus, corporis impedit veniam ipsa quas dignissimos modi, dolor aliquam nemo nulla itaque adipisci unde aspernatur.</p>
    </div>
    <div class="middle-site-content-5">
      <img src="eldenring-patchnotes-v109.jpg" alt="patch notes img">
      <h1>ELDEN RING PATCH NOTES </h1>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil minus eveniet ipsam culpa sint ducimus, corporis impedit veniam ipsa quas dignissimos modi, dolor aliquam nemo nulla itaque adipisci unde aspernatur.</p>
    </div>
    <div class="middle-site-content-6">
      <img src="eldenring-patchnotes-v109.jpg" alt="patch notes img">
      <h1>ELDEN RING PATCH NOTES </h1>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil minus eveniet ipsam culpa sint ducimus, corporis impedit veniam ipsa quas dignissimos modi, dolor aliquam nemo nulla itaque adipisci unde aspernatur.</p>
    </div>
  </div>
  <div class="nav-bar-container-right">
    <nav>
      <ul>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
      </ul>
    </nav>
  </div>
</section>