Ensure that the Left and Right menu are fixed in position, while allowing the middle content to be scrollable

I'm in the process of creating a web page with a fixed left and right menu, while the middle content should be scrollable and positioned behind the menus. I've attempted to implement this using the following HTML and CSS, but encountered an error.

When I set the right menu to position: fixed, it appears on the right side, but everything works fine when it's position:relative.

Your prompt response would be greatly appreciated.

.mainBody {
  display: block;
  border: 0px solid #000;
  max-height: 100%;
  min-height: 500px;
  position: relative;
}

.sidebar-left {
  border: 0 solid #004087;
  min-height: auto;
  position: fixed;
  z-index: 30;
}

You can view the full code snippet here.

In the screenshot below for reference, you can see that my right menu overlaps with the left menu when I apply position:fixed to the right menu:

View image here

csshtmltwitter-bootstrap-3

Answer №1

When you apply position:fixed, the element will automatically stick to left:0 and top:0.

To ensure the fixed menu stays on the right side, make sure to include right:0 in its styling.

Check out the example below (the red box is positioned with only position:fixed; whereas the blue box also includes right:0;).

Furthermore, when using position:fixed, using float:left or float:right is ineffective. The item with position:fixed aligns based on the specified values for top, right, bottom, and left. By default, it has top:0;left:0.

div {
position:fixed;
width:100px;
height:100px;
}
.test1 {
background:red;
}
.test2 {
right:0;
background:blue;
}
<div class="test1">

</div>
<div class="test2">

</div>

Answer №2

.mainBody {
  display: flex;
  margin: 0 auto;
  /*border: 0px solid #000;*/
  max-height: 100%;
  min-height: 500px;
  background-color: '#000';
}

.sidebar-left, .ScrollableContent, .sidebar-right {
  flex-grow: 1;
}

.sidebar-left{
  background-color: green;
}
<div class="mainBody" >
    <div class="sidebar-left">
      <a class="toggler" data-whois="toggler" id="openerleft">
        Menu 1
      </a>
      <div id="contentright" class='visible contentrightStyle'>
       <a href="#">Menu2</a>
      </div>

    </div>

    <div class="ScrollableContent">
      <p>Your scrollable content</p>
    </div>


    <div id="" class=' sidebar-right'>
      <a class="toggler" data-whois="toggler" id="opener">
        <i id="toggleImg" class="glyphicon glyphiconStyle"></i>Right menu
      </a>
      <div id="contentleft" class='visible contentleftStyle'>
      </div>

    </div>


  </div>

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

Adjusting the starting position of text within an HTML <li> element

I am currently in the process of designing a webpage layout with three columns. I have a specific vision for how I want the text to align within these columns but I am unsure of how to achieve it. Is there a way to make the text start at an exact position, ...

htmlcsshtml-lists

Removing jQuery error label from an HTML block

I need a single command that will remove an error label from my HTML when the field content is changed. It currently works on input and select elements, but not within an input-group. I am looking for a solution that will work universally across all instan ...

javascriptjqueryhtml

Tips for adjusting the div style when resizing the browser

As I work on a script, I encounter an issue where the style of a div should change when it becomes larger due to resizing. Even though I have come up with a solution for this problem, there are still some inconsistencies. Sometimes the width is reported a ...

javascripthtmlcss

What are some ways to restrict dynamic form submissions?

$(document).ready(function(){ var i = 1; $('#add').click(function(){ if(i < 5){ i++; $('#dynamic_field').append('<tr id="row'+i+'"><td><div class="form-group">& ...

javascriptphphtmljqueryjquery-events

.scss compiling with errors

Recently, I embarked on a new Vue(3) project. Within this project, I have set up some basic styling in the App.scss file and created a HomeView.vue with a corresponding HomeView.scss file (located in the /src/views/Home directory). The styling from both fi ...

cssvue.jssass

Can you provide the keycodes for the numpad keys: "/" and "." specifically for the libraries I am utilizing or any other library that does not overlook them?

I've hit a roadblock with my Chrome Extension development. Despite using two different methods to add keyboard functionality, the keys "/" for divide and "." for decimal on the keypad are just not registering. I've attempted to tackle this issue ...

javascriptjqueryhtmlcss

Display issue with loading animation

After clicking the button and seeing the alert message, I noticed that the loading animation does not display during the await new Promise(r => setTimeout(r, 2000));. /* script.js */ async function refreshStatus() { document.getElementById("load ...

javascriptcss

Customizing Background Image Opacity in MuiCssBaseline

I recently tried to set a background image for my demo application built with React, Next, and Material-UI. In my _app.js file, I included the following code: import React from 'react'; import { ThemeProvider } from '@material-ui/core/styles ...

cssreactjsmaterial-ui

Determine the location of an image with the help of Jquery

I'm currently working on finding the position of an image with Jquery. The issue I am facing is that it only provides me with the initial position of the image when the document was loaded. $(".frog").click(function(){ alert($(".frog").position() ...

javascriptjqueryhtmlimage

Calculate the total price from a combination of HTML and JavaScript options without altering the values

I'm currently facing an issue in my form where the final price needs to be updated when a different option is selected. I've searched extensively for the problem without success. I've used similar code before, just with different variables a ...

javascripthtml

Consistently maintaining a uniform distance between icons and the border box is essential

I am working on a team overview for a company where data such as name, job title, and information are fetched from the database. Due to varying lengths of information, the icons are not aligning properly in one line. https://i.sstatic.net/cEmKj.png Does ...

htmlcsssass

floating point for a list item compared to other elements

nav > ul > li { float: left; } #one { float: left; } <nav> <ul> <li> he has a cow </li> <li > he has a dog </li> <li> he has a mouse </li> </ul> & ...

htmlcss

retrieve the data attribute of a link within an unordered list

I have been attempting to extract a data attribute from a link within a list when it is clicked on. $(document).on('click', "ul.pagination li a", function(e) { e.preventDefault(); var page = $(this).attr("page"); var article_id = get ...

jqueryhtml

The Unique Font That Mysteriously Blocks Fake Italic Styles on Webkit Browsers

Currently, I am utilizing the PT Sans Narrow font in my project, which unfortunately only offers regular and bold styles. As a result, I require the browser to apply faux italics when needed. Strangely, this functionality is only working on non-webkit brow ...

htmlcssfontsfont-facewebfonts

Fixed position scrollable tabs with Material UI

I recently implemented material-ui scrollable tabs in my project, referencing the documentation at https://mui.com/material-ui/react-tabs/#scrollable-tabs. Here is a snippet of the code I used: <Tabs value={value} onChange={handleChange ...

javascriptcssreactjsmaterial-ui

Right-align the span and vertically align the header to the left

Seeking guidance on aligning a span to the right of a div, where the span is nested within a button. Although I have successfully achieved the above, I am encountering difficulties in vertically aligning the header while also keeping it to the left. .s ...

htmlcssbootstrap-4

Creating a table with adjustable row heights is a great way to enhance the user

Can the height of an HTML table row be adjusted dynamically by dragging and dropping, similar to how it's done in this demo (https://reactdatagrid.io/docs/row-resize), but for free? ...

htmlcssreactjs

When dynamically adding input fields in Bootstrap, there is a smaller gap between inline inputs

When adding a new list item dynamically in a modal using jQuery append, the spacing in the first li element seems to have a larger gap between the input fields compared to the rest that are added later. Even after checking the developer tools and confirmin ...

javascripthtmlcsstwitter-bootstrapbackbone.js

A strategy for concealing the selected button within a class of buttons with Vanilla JS HTML and CSS

I have encountered a challenging situation where I am using JavaScript to render data from a data.json file into HTML. Everything seems to be functioning correctly, as the JSON data is being successfully rendered into HTML using a loop, resulting in multip ...

javascripthtmlcssjson

Organizing AngularJS Data by Initial Letter with the <select></select> HTML Element

I'm trying to figure out how to filter an ng-repeat function based on the first letter of each option. For example, I want to filter a set of array or string so that only options starting with "A" or "B" are displayed. Can anyone help me with this? H ...

javascripthtmlangularjs