Tips for repairing a side bar and header with CSS when using a JS & jQuery scroller

I am working on a layout design and my goal is to have the left sidebar, right sidebar, and header remain fixed in place.

Here is the CSS code I am using :

    #container {
        padding-left: 200px;      /* Left Sidebar fullwidth */
        padding-right: 190px;     /* Right Sidebar fullwidth + Center Column padding */
    }

    #container .column {
        position: relative;
        float: left;
    }

    #center {
        padding: 10px 20px;       /* Center Column padding */
        width: 100%;
        overflow-x:hidden;
    }

    #left {
        width: 180px;             /* Left Sidebar width */
        padding: 0 10px;          /* Left Sidebar padding */
        right: 240px;             /* Left Sidebar fullwidth + Center Column padding */
        margin-left: -100%;
    }

    #right {
        width: 130px;             /* Right Sidebar width */
        padding: 0 10px;          /* Right Sidebar padding */
        margin-right: -100%;
    }

    #footer {
        clear: both;
    }

You can view the code here

Next, I plan to integrate nanoScrollerJS into the right sidebar section.

I may not be an expert in CSS, but I am constantly learning and improving my skills.

javascripthtmlcsslayoutscroller

Answer №1

Is this the solution you were seeking?

Fiddle Link

I have revamped most of your original code and substituted it with new code.

#fixedposition

position: fixed;
top: 0;
left: 0;
width: 100%;

#centercontent

margin-top: 32px; /* Height of header */
padding: 10px 20px; /* Padding for content section */
box-sizing: border-box;
border-left: 200px solid black; /* Left column width including padding */
border-right: 150px solid black; /* Right column width including padding */

#leftcolumn

width: 180px; /* Width of left column */
padding: 0 10px; /* Padding for left column */
float: left;

#rightcolumn

width: 130px; /* Width of right column */
padding: 0 10px; /* Padding for right column */
float: right;

#footersection

position: relative;
z-index: 1;

Answer №2

Employing position:fixed is an option, although additional adjustments may be required for compatibility with Internet Explorer.

Answer №3

If you want to ensure the center is properly displayed with a fixed height and overflow-y set, you can use this CSS snippet:

#center {
        padding: 10px 20px;       /* CC padding */
        width: 100%;
        height: 240px;            
        overflow-y:scroll;        
        overflow-x:hidden;
    }

For a live demonstration of this concept, check out this working example: http://jsfiddle.net/nr2NZ/27/

While the nanScrollerJS example may have a fixed div on the outside, using position relative for the outer boxes should prevent any issues in this scenario.

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

unable to load the ajax file

While setting up Ajax, I encountered an error message in IE that reads: Description: An issue occurred during the processing of a configuration file needed to handle this request. Please check the specific error details below and adjust your configuration ...

c#htmlajaxvisual-studio-2010

Issue with Javascript/Jquery functionality within a PHP script

I have been attempting to incorporate a multi-select feature (view at http://jsfiddle.net/eUDRV/318/) into my PHP webpage. While I am able to display the table as desired, pressing the buttons to move elements from one side to another does not trigger any ...

javascriptphpjqueryhtmlcss

Is the button not aligned properly with the email input field?

<div class="subscribe__form--action--btn"> <form action="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32545b5e5b5746545C5B5356477F54585850"> </a>" meth ...

htmlcssbutton

In Safari, non-ascii characters are incorrectly stored in document.cookies as trash

Below is a snippet of JavaScript code that I am working with: wdata['account'] = {"value": $(input).val(), "title": "Номер карты получения"}; var r = { "ipayway": ipw_selected, "wpayway": wpw_selected, "amount_type" ...

javascriptjsoncookiessafaricross-browser

"Bringing in" ES6 for Node

I am interested in utilizing import from ES6 instead of require from common.js in Node. Surprisingly, I initially assumed that import would function automatically in Node. However, it appears that it does not. Is there a specific npm package that needs t ...

javascriptnode.jsecmascript-6

Problem arising from reduxjs/toolkit - unable to execute action dispatch

As I delve into learning React, focusing on reactjs/toolkit in this specific section, I am working through a series of basic examples to enhance my understanding. One particular example involves simulating a user logging into their account. Despite identif ...

javascriptreactjsreact-redux

Collaborate on React-Native components together!

As a newcomer to the world of react, react-native, and nodejs, I embarked on creating my own node module using npm init. Within this module, I developed a component for styling buttons, packaging it with npm pack and linking it in my application's pac ...

javascriptnode.jsreact-native

Is there a way for me to invoke a different function that is located external to

I am currently in the process of setting up an event that triggers on any change within the form input class. import React, { useState } from "react"; DealerRegistration extends React.Component { state = { business_type : 'd ...

javascriptreactjsnext.js

Does the downloading of images get affected when the CSS file has the disabled attribute?

Is it possible to delay the download of images on a website by setting the stylesheet to 'disabled'? For example: <link id="imagesCSS" rel="stylesheet" type="text/css" href="images.css" disabled> My idea is to enable the link later to tri ...

javascriptcss

Returning Props in Dynamic Components with Vue 3

Exploring the capabilities of Vue3's Dynamic Component <component>, I am currently working with this setup: Component 1: <template> <div> <h1> Name Input: </h2> <Input :model="props.name" /> ...

javascriptvue.jsdynamicvue-componentreactive

Unable to modify variable to play audio

As I work on constructing my website, I am incorporating various sounds to enhance user experience when interacting with buttons and other elements. However, managing multiple audio files has proven challenging, as overlapping sounds often result in no aud ...

javascripthtmlaudiovar

Picture not adapting correctly to various screen sizes

I'm looking to adjust the size of an image based on the user's browser window. Here is the code I have so far: .image { max-height: 15%; width: auto; } The image class is used in this section of my code: <ul> <li> <img c ...

htmlcss

Whenever I change the value of a textbox using plain JavaScript, the text becomes hidden from view

I'm struggling to understand why this function is making the textbox value invisible. I attempted changing the hidden field to a visible field, but that didn't solve the issue. Would appreciate some guidance. Here's the complete page code, p ...

javascripthtml

Issue with Aligning Text Inputs and Images in Firefox

I am really struggling with this issue and it's driving me crazy. The problem lies with an image positioned at the end of a text input, styled using CSS. Here is the code snippet: .text_input{ background:url(../images/forms/text_input_back.png) t ...

cssfirefoxtextboxalignment

Obtaining information from an AngularJS Service Response and assigning it to the Controller Scope Object

I have a basic AngularJS 1.7 application where I am successfully fetching data from a web API using an AngularJS service. However, I am running into an issue where the data is not being populated in the controller scope object. I have verified that the dat ...

javascriptangularjsasp.net-web-api

What is the Best Way to Enable Tooltips to Function from External Elements?

I am currently designing a map that features points with tooltips. When hovered over, the tooltips function correctly. I am interested in exploring the possibility of making the tooltips interact with an external navigation bar. My goal is to have specifi ...

javascriptphpjquerytooltipster

Creating repeatable texture patterns in Three.js

Hello, I have developed a basic renderer for my 3D objects that are generated using PHP. While I am able to successfully render all the objects, I am facing some major issues with textures. Currently, the texture I am using is sized at 512x512 pixels. I ...

javascriptthree.js

Utilize AJAX to fetch and display the response from a Node JS route directly onto an HTML page

At the moment, I am retrieving client-side HTML/JS inputs (var1 and var2) which are then sent to server-side Node JS. The input values are stored in variables through an AJAX post call made to a specific route. What I want now is to define the values of v ...

javascripthtmljquerynode.jsajax

The radio button's checked attribute fails to function

I am currently working on adding a hover effect to radio button labels, and while it is functioning correctly, I would like to achieve the following: When a radio button is selected, I want the corresponding label to have a background color. Despite tryi ...

htmlcssradio-button

Issue uploading with Candy Machine Version 2/ complications with directory

For some reason, I am encountering issues with the upload operation. Switching from relative to absolute paths did not resolve the error, and using the -c flag for the directory containing images and JSON files is causing a problem. However, other flags ...

javascriptnode.jscandy-machine