The layout designed with CSS Grid features two static sidebars, but unfortunately, the main content is not aligning

After deciding to experiment with CSS-grid, I encountered a frustrating roadblock. My goal was to create two fixed navigation bars on the left and right sides, with the main content in the center that would be scrollable.

<div class="grid">
    <div class="sidebar-left">
        1
    </div>
    <div class="sidebar-right">
       2
    </div>
     <div class="main-content">
         Lorem Ipsum text here...
    </div>
</div>

Here is my CSS code snippet:

.grid {
  display: grid;
  grid-template-columns: 10vw auto 10vw;
}

.sidebar-left {
    position: fixed;
    width: 10vw;
    background: red;
}

.sidebar-right {
  width: 10vw;
  background: blue;
  position:fixed;
  right:0;
}
.main-content {
  background: yellow;
}

Issue: Struggling to correctly position the main-content div between the two sidebars.
Attempts to fix: Tried various solutions from StackOverflow, but the layout gets disrupted by the second nav bar.

You can view the full CodePen example here.

csscss-grid

Answer №1

Feel free to test out the code below.

.grid {
    display: grid;
    grid-template-columns: 10vw auto 10vw;
}

.sidebar-left {
    width: 10vw;
    background: red;
    position:fixed;
}

.sidebar-right {
    width: 10vw;
    background: blue;
    position:fixed;
    right:0;
}
.main-content {
    background: yellow;
    grid-column:2;  // Added
}

Answer №2

The issue arises when you apply the position:fixed style to the sidebars, causing them to be removed from the grid flow. Consequently, the main-content element becomes the sole grid item and automatically positions itself in the first column. To resolve this, you can explicitly specify that it should occupy the second column:

.main-content { grid-column: 2 / 3; }

It's worth noting that this action essentially achieves the same outcome as adding a 10vw margin because the first and last columns are left vacant.

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

What methods can I use to create a navigation bar similar to this design?

Lately, I've noticed a growing trend in navigation bars that are designed to resemble waves. Wavey Navbar I'm eager to incorporate a similar navbar into my website, but I'm struggling to figure out how to do it. I'm working with react ...

htmlcss

Automatically adapt the height of a bootstrap button based on the dimensions of other bootstrap buttons

First and foremost, my objective is to centrally align a glyphicon both vertically and horizontally within a button. Despite attempting CSS attributes like position: relative; and position: absolute;, my efforts have been in vain. You can check out the sam ...

jquerycsstwitter-bootstrap

Looking to create circular text using HTML, CSS, or JavaScript?

https://i.sstatic.net/pnu0R.png Is there a way to generate curved text in HTML5, CSS3, or JavaScript similar to the image linked above? I've experimented with transform: rotate(45deg); but that just rotates the text without curving it. Additionally, ...

javascriptcsstext

What is the best way to design a shape (a quadrilateral with rounded edges) using CSS?

Struggling with creating a widget in React Js that has an image as the background? The image is designed to be dynamic, changing color and size based on the device. I've attempted using inline SVG and SVG within an img tag but can't seem to contr ...

htmlcssreactjssvgcss-shapes

Gain command over the underline style of text without relying on the border property

Ingredients: just a simple text input field. Question: Is there a way to customize the size, color, and position of the underline styling on an input tag? I noticed that the property text-decoration-color is supported in the moz browser engine, but I&apos ...

htmlcss

Creating a Bootstrap layout with columns of varying heights

My current setup looks like this: <div class="row"> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content&l ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-4

Container displaying zero height due to masonry issue

Currently, I am developing a project that requires a responsive masonry layout. The container has a maximum width set to 960px, but it is supposed to adjust based on the browser's size. Each grid item has a percentage-based width (100%, 66.666666etc%, ...

jquerycssresponsive-designjquery-masonry

VUE component disregarding CSS styles

Check out my awesome VUE component below: <template> <div> <div class="bottom-footer"> {{msg}} </div> </div> </template> <script> export default { ...

cssvue.js

Preventing a sprite from going beyond the boundaries of a canvas with pure JavaScript - here's how!

I am in the process of developing a game using native JavaScript, HTML, and a touch of CSS. I have two blocks called Sprites that tend to keep moving off the canvas edges when they reach them. Question: How can I utilize native JS to prevent the sprites fr ...

javascripthtmlcsscanvas

Compact looped slideshow

Currently in the process of designing a website and looking to incorporate a unique photo gallery feature. The concept is as follows: The photo gallery will be displayed in a rectangular/box shape. There are a total of 10 photos, with only 7 initially vis ...

javascriptcss

The content of btn-id element in Angular is showing as undefined

I have a JavaScript file located at sample/scripts/sample.js and there are 8 HTML files in the directory sample/src/templates/. My goal is to select a button on one of the HTML files. When I tried using angular.elemnt(btn-id).html(), I received an 'un ...

javascriptcssangularjshtmlangularjs-directive

Creating flexbox items with equal height

I have a flexbox parent with flex-direction set to row. Within this parent, I have two children that I want to have the same height! Both of these children contain dynamic content with varying heights. The issue I'm facing is that when I add text t ...

cssflexbox

Adjust the size of the iframe image to fit seamlessly within the design

Is there a way to adjust the size of the image on the right without altering the layout design? The current GIF is 500x500px, but it is only displaying as 100x100px. Any assistance would be greatly appreciated! To see what I currently have (Demo with code ...

javascripthtmlcsslayoutresponsive

Elevate your website with Bootstrap 4's compact floating icon menu

I've been searching online, but I can't seem to find exactly what I need. My goal is to create a compact Sidebar menu that stays on the left side and is centered. The only solution I came across was this: `https://codepen.io/kemsly/pen/mJxwJg` ...

cssbootstrap-4

The presence of an image within an HTML anchor is causing an unexpected artifact to

Currently, I am working on a simple header design, but there seems to be a strange issue with the anchors containing image tags. The problem can be seen in the screenshot below: Image Link Here is the HTML structure: <div class="block-content"> ...

htmlcssanchor

How can you remove the border when an input is in focus on Chrome or Microsoft Edge?

I need to style an input field in a way that removes the black borders/frame that appear around it when clicked on in Chrome and MS Edge. Strangely, Firefox does not display this frame/border. How can I achieve this consistent styling across all browsers? ...

htmlcss

Incorporating shadow effects along the right border of alternating table cells: a step-by-step guide

How can I set a proper shadow border for alternating td elements in a table? I've been experimenting with the code below. While the shadow effects work, they are getting cut off at each td junction. Can anyone provide assistance? Here is my table: ...

htmlstylesshadowcss

What is the strategy used by jQuery to select elements by class name?

Is there a "getElementsByClass" function in JavaScript? If not, how does jQuery manage to do it without looping through all elements which would be very inefficient? Also, how can I specify CSS for elements with two or more classes? <a class="one two ...

jquerycssdom

Achieve vertical scrolling within a div of a set width employing CSS

My situation involves a fixed size div that is 500px in dimensions. Inside this div, there is a smaller div. However, as the number of divs increases, it starts to display a horizontal scroll. I am aiming for a vertical scroll instead. I attempted to resol ...

htmlcssuser-interfacewebvertical-scrolling

Is there a way to align the image block-grid from left to right?

Is there a way to change the alignment of images in the x-block-grid four-up class to be RTL on this page? () I have managed to make the h2 tag RTL using the following code: <h2 class="h-custom-headline h5 accent" dir="rtl"><span>Code</spa ...

htmlcssalignment