Placing the navigation 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.
  
  ........... (text too long to display) ..... 





t;">link</li>

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



</section>

Trying to arrange elements within a <section>, specifically placing a nav bar on the right side of the section while keeping other items centered within it.

Inexperienced with these techniques, struggling to achieve the desired layout despite attempting various methods found online that didn't maintain the specific positioning requirement. Even experimenting with position: absolute resulted in overlapping content.

The current layout:

Rather than anticipated

htmlcssflexbox

Answer №1

Organize all the middle-site-content divs within their own .wrapper, apply flex to that wrapper, and set its flex: 1;.

Next, specify a width for this new wrapper (referred to as .middle-wrapper) along with 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;
}

... (skipping redundant CSS declarations for brevity)

.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>
    ... (additional HTML structure)
  </div>
</section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React - using dangerouslySetInnerHTML does not display the expected output

When I enter the following text in the textbox labeled "Type Here" AAA: <HEllo> BBB: <HE llo> The desired result should be identical to what is entered in the "Type Here" box. However, the actual result box does not display the same output ...

htmlreactjs

The placement of my footer is off and not aligned with the bottom of the page

I am struggling to make my footer align with the bottom of the page rather than sticking to the bottom of the browser window and moving along with the scroll. How can I fix this issue? The goal is to have the footer remain out of sight at the bottom of th ...

htmlcss

Tips for aligning placeholder and text at the center in a React Material UI TextField

Existing Layout: https://i.stack.imgur.com/Zv4Tg.png Desired Layout: https://i.stack.imgur.com/Xuj6O.png The TextField element is displayed as follows: <TextField multiline={false} autoFocus placeholder={props.defaultAmt} ...

javascriptcssreactjsmaterial-uijsx

Guide to creating a versatile navigation bar using Bootstrap and HTML

I am looking to create a navigation menu that can be easily reused across multiple pages on my bootstrap/html website. Instead of duplicating code, I want to implement a solution for creating a reusable navigation menu in bootstrap/html. How can this be ...

javascripthtmltwitter-bootstrap

Designing a Curved Stepper Component in the Shape of an S

I've been attempting to create a custom stepper component with an S-curve shape using React, but so far I haven't been successful. I even tried utilizing the MUI Stepper component and experimented with pure HTML and CSS, but couldn't achieve ...

javascripthtmlcssmaterial-uistepper

How to Use Vue.js to Find the Nearest Div Element with a Specific

Below is the HTML code I am working with: <div id="app"> <div class="image"> <div class="overlay"> <p>Some overlay text</p> </div> <img src="https://placeimg.com/640/480/any" class="img-fluid"> ...

javascripthtmlcssvue.js

how can I use jQuery to disable clickable behavior in HTML anchor tags?

Here is the HTML code I am working with: (note -: I included j library on the top of page ) <div class="WIWC_T1"> <a href="javascript:void(0);" onClick="call_levelofcourse();popup('popUpDiv1')">Level of Course</a> </di ...

javascriptjqueryhtml

What can be done to stop Bootstrap columns from shifting positions or stacking on top of each other unexpectedly?

I'm currently working on a testimonial section for my project. The challenge I'm facing is that the content within the 4 divs is not evenly distributed. As a result, when I try to adjust the width of the screen and expect them to align in a 2-2 f ...

htmlcsstwitter-bootstrap

Creating a Dynamic System for Converting Numeric Digits to Alphabetical Grades

Utilizing the code provided below, you can calculate a user's grade point average ranging from A+ to E-. Is there a way, within the following fiddle, to not only display the GPA but also convert it into a corresponding letter grade from A+ to E-? Curr ...

javascriptjqueryhtmlcssdynamic

Rendering HTML with Apache Tiles using an empty <a></a> tag

Having encountered a peculiar issue with HTML lately. In my backend, the problematic section looks like this. <div class="content"> <a href="detail.html"></a> <img src="assets/i ...

htmlspring-mvcapache-tiles

I'm having trouble with my tablet view taking priority over my desktop view - what could be causing this issue?

Styling for different screen sizes: @media (min-width: 991px) and (max-width:768px){} .container, .container1, .container2 .container3{ float: left; } .container1{ width: 50%; } .container2{ width: 50%; } .container3{ width: 100%; } /**** ...

htmlcssmedia-queries

Triangles positioned on the edges of a division element

I am attempting to create a DIV with angled corners, as depicted in the image below: https://i.sstatic.net/1a9LY.png So far, I have successfully implemented the top right corner using a tutorial. Here is the code snippet that accomplishes this: .lifeatb ...

css

What is the best way to center an image and text vertically using bootstrap?

I'm currently working on a Bootstrap website and have reached a section where I want to display text on the left and an image on the right. While I've managed to achieve this layout, I'm struggling with vertically centering the image. Despit ...

htmltwitter-bootstrapcssflexbox

How to add an 'alt' text tag to a background image sprite

I have a button that opens a new browser window, so I've added alternate_text and title tags to notify the user that a NEW window will open when hovered over. <img class="mp3PlayBtn" alt="Mp3 player opens in popup window" title="Mp3 player opens i ...

htmlcssaccessibilitycss-sprites

Iterate over the array and eliminate any stylesheets

Currently working on a website using WordPress, and dealing with some unwanted css files that come with certain plugins. I've been attempting to remove these stylesheets with JavaScript but keep running into an error saying Failed to execute 'qu ...

javascripthtmljquery

Instructions on how to make the image within this div expand to full screen in order to cover up the blue background color

I created a div and set its background image, but the image is not covering the full screen. There's some space around it. The blue color is the body color. Please refer to the image here I am very new to web development, so please forgive my silly ...

htmlcss

I am looking to preload a separate webpage prior to the HTML loading in AngularJS

I am looking to implement a feature in my AngularJS app where a different webpage (e.g. google.com) will be loaded based on the response of a REST API before any default HTML content is displayed. I have attempted to make a REST service call within a fact ...

javascripthtmlangularjsrest

Troubleshooting an issue with IE regarding box-shadow CSS functionality

I have a problem with my website design where the box-shadow effect on the top menu is not displaying properly in Internet Explorer. I tried adding specific code for IE8 and lower versions to fix this issue: zoom:1; /* This enables hasLayout, which is nec ...

internet-explorercss

Personalize the way UIkit tooltips appear

I've been working on customizing a uikit tooltip for my checkbox. I managed to change the font and background color, but for some reason, I can't adjust the font size. I even tried adding a custom class without success. Do you think it's pos ...

cssuikit

Turn the flipcard hover effect into an onclick action

After successfully creating interactive flip cards using CSS hover effects, I am now faced with the challenge of adapting them for mobile devices. I'm struggling to figure out how to translate my hover effects into onclick events for a mobile-friendl ...

jqueryhtmlcss