Achieve a fixed position without altering the resolution

Describing the layout of my website is a bit tricky, but I'll give it a shot. I have a left navigation bar and a container that spans the rest of the page in a single line. The navigation bar has a width of 88px, and the .right-column-wrapper takes up the remaining space at 100%. Inside the .right-column-wrapper, there are two columns side by side, each occupying 50% of the space. However, when I apply position: fixed to the .right-column, it doesn't take up 50% of the .right-column-wrapper as expected, instead taking up half of the browser width.

HTML Code:

<div class="page-wrapper">
        <!-- Left side navigation -->
        <div class="nav-bar-left">
            <a href="" class="w-nav-brand">
                <img src="https://i.imgur.com/0f8pGKD.png" alt="">
            </a>
            <nav role="navigation" class="nav-menu-left">
                <a href="who.html" class="nav-link active">who</a>
                <a href="what.html" class="nav-link">what</a>
                <a href="why.html" class="nav-link">why</a>
                <a href="contact.html" class="nav-link">contact</a>
            </nav>
            <div class="nav-left-social-icons">
                <a href="https://twitter.com" target="_blank" class="social-icon-link">
                    <img src="https://assets.website-files.com/5b17159f88941cfc367e81a3/5b1715a088941c0f047e81f3_twitter-icon.svg" alt="">
                </a>
                <a href="https://twitter.com" target="_blank" class="social-icon-link">
                    <img src="https://assets.website-files.com/5b17159f88941cfc367e81a3/5b1715a088941c314a7e81d9_instagram-icon.svg" alt="">
                </a>
                <a href="https://twitter.com" target="_blank" class="social-icon-link">
                    <img src="https://assets.website-files.com/5b17159f88941cfc367e81a3/5b1715a088941c861b7e82d0_facebook-icon.svg" alt="">
                </a>
            </div>
        </div>
        <!-- Right components -->
        <div class="right-column-wrapper">
            <div class="column left-column">
                <div class="left-column-top">
                        ...

CS code:

.page-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
}
...
javascripthtmlcss

Answer №1

To adjust the dimensions of a background image, you can modify the height and width properties in the right column, while utilizing the `calc` function to dynamically calculate the width of the left column

.page-wrapper .right-column-wrapper .column.right-column {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 500px;
    ...
}

.page-wrapper .right-column-wrapper .left-column {
    width: calc(100% - 300px);
}

Check out this example

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

An issue has been detected where the bullet list is uneven due to the CSS property/value columns being set

Is there a more effective way to split a bulleted list into two columns than the method I am currently using and ensure that the columns are aligned at the top? .hand-bullet-list ul{ list-style-type: none; margin-left: 0px; } .hand-bullet-list ...

htmlwordpresscsscss-multicolumn-layout

Implementing PHP logic for adding a class to an HTML tag

I have a PHP file that handles the sending of my form. Everything is functioning correctly, but I need to make a small modification. When the message is successfully sent, I want PHP to dynamically add the "active" class to a specific div in my HTML. This ...

phphtml

The components are not anchored to the window

In the header, I require: The logo to be positioned on the left side of the banner (without space) Both the banner and logo to always be centered on the page regardless of screen size Four images that should always be at the top right corner of the windo ...

csstwitter-bootstraptwitter-bootstrap-3

Unable to capture the text within the span element. Attempting to retrieve a response from a previously run javascript function

Currently, I am facing a challenging task in FileMaker using Webdirect. I have implemented a QR code generator and reader, and while I can successfully read the code, I am struggling to capture the result of the scan. The scanned data is displayed in a hid ...

javascripthtmljquerycss

Guide to transferring req.params to a callback function within node.js

I am currently working on a Node.js project using Express. I have been attempting to retrieve data using the NPM request package, utilizing a specific URL and passing an anonymous callback function to handle the resulting JSON file. The code below has bee ...

javascriptnode.jsexpress

What is the specific table element compatible with Polymer3?

I stumbled upon iron-data-table (), but it relies on bower which is used in Polymer2. However, I am working with npm in Polymer3. Is there a suitable table element or an alternative solution compatible with Polymer3? ...

javascriptnpmpolymer-3.x

Creating a two-column grid layout using Bootstrap 4 is a simple and efficient process. Let's see how

I've been struggling to get this to display side by side in a two-column grid. Even after following Bootstrap tutorials, I can't seem to make it work. Check out the code below: <div class="row"> <div class="col-md-8 ...

javascripthtmlbootstrap-4

"Troubleshooting: Issue with Inspect Element showing blank or

When I attempt to inspect element in Chrome, nothing appears. I typically see the Elements | Network | Sources | Timeline | Profiles | Resources | Audits | Console menu and then a sub menu with: Console | Search | Emulation | Rendering Where can I find ...

htmlcsstwitter-bootstrap-3frontendweb-inspector

Retrieving information from relationships in Sequelize

In my Sequelize database, I have the following associations: db.checktypes.belongsToMany(db.questions, { through: db.checktypeslike, }); db.questions.belongsToMany(db.checktypes, { through: db.checktypeslike, }); Additionally, db.checktypeslike.hasMan ...

javascriptnode.jssequelize.js

What is the meaning of the term writeHead?

Upon reviewing a GroupMe bot template in nodejs, I noticed a common occurrence of the function call res.writeHead(200);. What is the typical purpose of writeHead(200)? Is it a shorthand for "write header"? ...

javascriptnode.js

in javascript, how can you access the value of a parent object within a nested object?

Within the material ui framework, I am utilizing the createMuiTheme function to create a theme. How can I access the values of the parent object within a nested object? (I am aware that I can declare global variables above the function); To better unders ...

javascriptreactjsmaterial-ui

Make sure to prevent the submit button from being activated if there is any white space present in the

<form name="regForm"> <input type="text" id="username" name="username" ng-model="username" required> <button ng-click="submitSignup()" type="submit" ng-disabled=" (regForm.username.$dirty && regForm.username.$invalid) || regForm.use ...

javascriptangularjs

Reloading Vue router view following a successful AJAX request

Currently, I am working with a Vue Router set up that consists of two components: a list view and a detailed view. The challenge I am facing is when the data is fetched via ajax, the non-router list updates successfully but the router view does not reflect ...

javascriptajaxvuejs2vue-router

Footer suffering from image invisibility syndrome

Having trouble displaying two social media images in my footer. Despite including them in my image map correctly, they just won't show up on the website. I've tried a lot of different things, but nothing seems to be working. Could it have somethi ...

htmlcss

Accessing the current instance in Vue when triggered by a checkbox event

Recently, I tested out a to-do-list application built in Vue that has a checkbox feature to mark completed items. I'm looking for a way to access the current instance from the checkbox event. Here's what I've accomplished so far: myObject ...

javascriptvue.js

The browser tab is aware of its duplication

I am looking for a way for my browser tab to detect if it has been duplicated. Existing solutions I've come across only focus on either the duplicated tab itself knowing it's a duplicate, or the original tab recognizing the duplication, but thes ...

javascriptangulartypescriptduplicatesbrowser-tab

How can Material UI React handle long strings in menu text wrapping for both mobile and desktop devices?

Is there a way to ensure that long strings in an MUI Select component do not exceed the width and get cut off on mobile devices? How can I add a text-wrap or similar feature? Desktop: https://i.sstatic.net/lo8zM.png Mobile: https://i.sstatic.net/8xoW6. ...

javascriptcssreactjstypescriptmaterial-ui

Struggling to fetch a basic form field input using node.js and express

Currently, I am delving into Node.js with express and web development. For my inaugural project, I aim to craft a directory listing application. In my quest, I stumbled upon a captivating HTML form. Here's a snippet of the form's code: <form a ...

htmlnode.jsexpress

Unable to wrap text with CSS in Internet Explorer

I am encountering some issues with certain styles that are functioning correctly in Chrome and Firefox but not in IE. The main problem I am facing is that a specific style that works fine in Chrome does not wrap text into the column in IE. To reproduce t ...

htmlcssflexbox

Incorporating Vuetify into a Vue CLI application with the help of webpack

I am facing an issue with my Vue CLI application that uses Webpack and Vuetify. The Vuetify components are not loading properly, and I keep getting the following warnings: Unknown custom element: < v-app > - did you register the component correctly? ...

javascriptvue.jsvuejs2vue-componentvuetify.js