What is the best way to add a right-hand side navigation bar without blocking the scrollbar from view?

Take a look at this webpage:

I am designing a website that includes a header, a footer, and a central container with left and right navigation bars surrounding a content area. However, I want the scrollbar for the content to appear on the right side of the window rather than within the content area itself (to adhere to Fitt's Law when in maximized mode). The issue is that the right navbar covers the scrollbar, making it invisible.

I have observed that the navbar shifts to the left if the scrollbar is activated for the entire page (i.e., the <body>). One option would be to use an <iframe> for the content. But is there a way to adjust the right navbar position to the left to accommodate the scrollbar without having to resort to using an iframe?

For an example utilizing an iframe, refer to www5.atpages.jp/~syockit/testIframe.html.

css

Answer №1

The element with the id of content is currently extending to the right, in order to fix this issue you will need to adjust the CSS code like so:

#content {
   padding-right: 150px
}

should be changed to:

#content {
  margin-right: 150px;
}

Answer №2

After some exploration, I've successfully discovered a solution! It has been tested and proven to work on Chrome 11, Firefox 4, and Opera 11.

Here is the CSS:

.middle { position: absolute; left: 120px; overflow: auto; }
.content { padding-right: 150px; }
.middle, .right-sidebar { top: 100px; bottom: 50px; }
.right-outer { float: right; }
.right-sidebar { position: fixed;}
.right-outer, .right-sidebar {  width: 150px; }

The HTML structure:

<div class='middle'>
  <div class='right-outer'>
    <div class='right-sidebar'>
      Insert sidebar content here.
    </div>
  </div>
  <div class='content'>
  Place main content here.
  </div>
</div>

You can view the functioning demo at this link: http://jsfiddle.net/b4kPm/2/

UPDATE: Unfortunately, it doesn't seem to be compatible with Opera 11! Wonder what caused this issue...

UPDATE 2: In Opera's case, absolute positioning does not account for scrollbars. Had to resort to using float: right.

UPDATE 3: Just as I suspected… The layout won't adjust automatically when there's dynamic content changes that eliminate overflowing content. This solution only works upon initial loading of the page or when there are content re-renders.

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

Issue with jQuery incorrectly calculating height post-refresh

I am currently utilizing jQuery to vertically center various elements on a webpage. Due to lack of support in older versions of IE, I cannot use the table-cell CSS statement. Therefore, I am using jQuery to calculate half of the height and then position it ...

javascriptjqueryhtmlcssheight

Displaying an HTML button above JavaScript code

Hello, I am currently working on a project that involves displaying the Earth and I am in need of assistance with positioning some buttons on the screen. Currently, I am facing an issue where the buttons appear either above or below the JavaScript code. I ...

javascriptcsshtmlweb

Display issue on Safari when using flexbox?

I'm currently experiencing an issue with uploading a webpage to my domain, specifically on Safari. I have applied all the necessary prefixes, but it seems that the error lies with the display: flex property. When viewed on Chrome, the page looks like ...

htmlcss

Steps for styling the header of an Antd Collapse Panel

I'm attempting to modify the text color in the header of an ant panel. Below is the entire ant collapse component code: <Collapse accordion defaultActiveKey={defaultOpenPanel}> <StyledCollapsePanel key="tasksAssignedToMe" header={ ...

htmlcssreactjstypescriptantd

Draggable element with a centered margin of 0 auto

Encountering an issue with jQuery UI sortable/draggable where the element being dragged, when centered using margin:0 auto, starts dragging from the left side of the container instead of the center where it is positioned. Check out this demo to see the pr ...

javascriptjquerycssjquery-ui

What could be causing media queries to not update values even after being changed through JavaScript?

I have a simple navigation bar on my website, featuring links to different subpages. To enhance the user experience on mobile devices, I added a hamburger menu icon that is displayed on smaller screens. The links in the navigation bar are hidden using CSS ...

javascripthtmlcssmedia-queries

Tips for scaling an image to perfectly fit the browser screen

I have spent a significant amount of time researching and coding, but I am still unable to get this seemingly trivial task to work. Here are the conditions: The browser window size is unknown, so any solution involving absolute pixel sizes will not work. ...

htmlcss

Tips for adjusting image size using media queries

How can I ensure that the image resizes correctly on smaller screens? Currently, the image spills over the container and there are gaps between the top/left of the container and the image. Should I adjust the image size in the media query or expand the con ...

htmlcss

What could be the reason why my JavaScript code for adding a class to hide an image is not functioning properly?

My HTML code looks like this: <div class="container-fluid instructions"> <img src="chick2.png"> <img class="img1" src="dice6.png"> <img class="img2" src="dice6.png" ...

javascriptcss

Ensure that the heights of various Flexbox rows are always visible within the boundaries of the browser window

Within flexbox, I've laid out three rows of boxes with varying heights. This layout ensures that the rows always align perfectly with the bottom of the browser window without any gaps. You can see the full layout on Codepen by following this link: htt ...

htmlcsssassresponsive-design

Adjust the z-Index of the list item element

I am attempting to create an effect where, upon clicking an icon, its background (width and height) expands to 100% of the page. However, I am struggling with ensuring that the 'effect' goes underneath the this.element and above everything else. ...

javascriptjqueryhtmlcss

The issue with material-ui 0.15.2 is that it applies extra vendor-prefixed styles on the server side but not on the client side, resulting in warnings in React 15

I have set up my project with the following configurations: react is at version 15.2.1 material-ui is at version 0.15.2 I am using express and universal-router for server-side rendering Every time I include a material-ui component, I encounter this erro ...

cssreactjsmaterial-uiisomorphic-javascriptvendor-prefix

What is the best way to adjust the height and width of a div when it comes into view through scrolling?

How can I automatically and frequently change the size of my div when it is scrolled into view? HTML <div id="contact" class="fadeInBlock"> <div class="map"> <div class="pointer"> <div class="dot"></div& ...

javascriptjqueryhtmlcss

Resizing Wordpress images to uniform height within a Bootstrap flex-row with flex-nowrap styling

I have successfully integrated Bootstrap with a Wordpress Underscores Template. My goal is to create a horizontally scrollable container filled with images of equal height. Currently, I am facing an issue where the images within the scrollable container ...

csswordpressimagebootstrap-5image-scaling

Is it not feasible to place a well within a column using Bootstrap?

Would like to place a .well div (or a button, whichever works best) within the designated green area shown in this image: here Here is the code I currently have: <div class="container-fluid"> <div class="row row1" style=&q ...

csstwitter-bootstrap

Troubleshooting: JQuery - Applying CSS to dynamically generated elements

I used JQuery to dynamically generate a table, but I'm having trouble applying CSS to the columns. You can see an example at this Codepen link here. Specifically, I need to set the width of the first column to 100px. Could someone please assist me wi ...

javascriptjqueryhtmlcss

Adjust the color of the font icon within a button when hovering over it

On the bottom of my website (still in development) , there are 3 buttons with an arrow icon preceding the text. The arrow is created using an icon font and I would like it to change color (along with the button text) when hovered over. Any suggestions on ...

csshovercss-selectors

Having trouble displaying dynamically added images in my jsx-react component. The images are not showing up as expected

import React from "react"; import ReactDOM from "react-dom"; var bImg = prompt("Enter the URL of the image you want to set as the background:"); const bStyle = { backgroundImage: "url(bImg)"; // The link is stored ...

javascriptcssreactjsjsx

Combining 2 divs harmoniously

I have a set of HTML div elements that are styled using the following CSS: div{ width:250px; height:250px; display:inline-block; border-radius: 10px; margin:10px; background:#2E2922; vertical-align:top; } In my HTML, these div ...

htmlcss

Using a border-radius on Internet Explorer 11 reveals the background through the corners

Encountering issues with rounded borders in IE 11 (11.0.9600.18350)? Check out this minimal fiddle for more information: https://jsfiddle.net/7phqrack/2/ Here's the HTML code snippet: <div class="backgrounddiv"> <div class="outer"> ...

htmlcssinternet-explorer-11