Securely affix two elements on a webpage using HTML, CSS, and Bootstrap

In my webpage, I have split the layout into three sections: left, middle, and right. Using bootstrap, the left and right sections are set to 3 columns each, while the middle section is 6 columns. I want only the middle section to be scrollable, while the other two remain fixed in place.

I am aware of the CSS property position: fixed, but when I apply it, the left and right sections end up overlapping. Is there a way to keep them fixed without explicitly setting the position by defining the left and right CSS attributes? I'm looking for a solution that will adjust automatically if I make changes in the future.

Thank you in advance!

htmlcssbootstrap-4

Answer №1

  • To adjust the size of the middle section, make sure to specify the height.
  • I've currently set it to 500px, but feel free to modify it according to your needs.
  • Don't forget to add overflow-y to the div with the specified height to enable vertical scrolling.
  • If you require the full page height, there's a commented line for your reference.
  • The class .bg is purely for demonstration purposes and can be removed.

.scrollable {
  /*height: calc(100vh - 30px);*/
  height: 500px;
  overflow-y: auto;
}
.bg {
  background-color: antiquewhite;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-lg-3 bg">
      Left Section
    </div>
    <div class="col-lg-6">
      <div class="scrollable">
        <p>Port-salut parmesan mozzarella. Airedale blue castello blue castello fromage frais mascarpone smelly cheese pepper jack paneer. Chalk and cheese cheese and biscuits caerphilly boursin pecorino emmental cow dolcelatte. Cauliflower cheese cut the cheese stilton cheesecake cream cheese manchego chalk and cheese port-salut. Cheese triangles when the cheese comes out everybody's happy cheese and biscuits port-salut.</p>

<p>Bocconcini brie dolcelatte. Manchego danish fontina st. agur blue cheese cream cheese paneer gouda who moved my cheese say cheese. Cheese strings hard cheese bocconcini cheesy grin croque monsieur cheese slices fondue danish fontina. Cheddar fondue fromage halloumi cream cheese.</p>

<p>Gouda ricotta cow. Babybel the big cheese cut the cheese mascarpone cottage cheese swiss the big cheese taleggio. Caerphilly smelly cheese macaroni cheese cheeseburger bocconcini red leicester parmesan macaroni cheese. Cheese strings camembert de normandie stilton mascarpone cow parmesan cheese and biscuits melted cheese. Rubber cheese cheese triangles.</p>

<p>Bocconcini dolcelatte cream cheese. Boursin hard cheese fondue danish fontina everyone loves cow fromage parmesan. Babybel halloumi cream cheese swiss cow smelly cheese boursin cow. Melted cheese stinking bishop cheese on toast who moved my cheese who moved my cheese cheesy grin manchego cheese slices. Emmental goat manchego cheddar.</p>

<p>Roquefort stinking bishop everyone loves. Smelly cheese monterey jack edam gouda cheese and wine cheddar who moved my cheese edam. Cow jarlsberg who moved my cheese babybel gouda everyone loves st. agur blue cheese emmental. Blue castello goat swiss airedale cream cheese mozzarella dolcelatte brie. Blue castello danish fontina lancashire rubber cheese.</p>
      </div>
    </div>
    <div class="col-lg-3 bg">
      Right Section
    </div>
  </div>
</div>

For a clearer understanding, run the snippet in full screen mode.

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 is the best way to keep an image fixed at the bottom, but only when it's out of view in the section

There are two buttons (images with anchors) on the page: "Download from Google Play" and "Download from App Store". The request is to have them stick to the bottom, but once the footer is reached they should return to their original position. Here are two ...

javascriptjqueryhtmlcssfrontend

Troubleshooting: CSS border-radius issue with embedded iframe

I am struggling to embed an iframe from my Blogger site into a specific section on my website and round its corners using CSS. I followed a tutorial that suggested using overflow: hidden;, but for some reason, it's not working in my case - see the ima ...

htmlcssiframe

obtain the string representation of the decimal HTML entity value

Similar Question: how to create iphone apps similar to ibeer, imilk, ibug, ibeer Using javascript to obtain raw html code Imagine having an html section like this: <div id="post_content"> <span>&#9654;<span> </div> ...

javascriptjqueryhtmlencoding

Ways to Randomly Flip Divs

I have developed an application where all divs flip vertically on hover. I am looking for a way to make the flipping random without requiring a hover. Any ideas on how to achieve this? .vertical.flip-container { position: relative; float: left; ma ...

javascriptjqueryhtmlcss

Which specific transitionend (or animationend) event should I use for this application?

I'm feeling a bit lost when it comes to using transitionend (or if I should be using animationend in this scenario). I'm not sure whether to utilize var, node, or box. Essentially, I am a complete beginner in this case. My goal is to have my div ...

javascriptjqueryhtmlcssanimation

Issue with jQuery dropdown navigation bar

I am interested in creating a drop-down menu using jquery (here's the corresponding jsFiddle). HTML: <ul id="mainmenu"> <li><a href="http://myszki/">Aktualności</a></li> <li class="parent item13"><a href=" ...

jquerycss

What is the strategy to load a div exclusively when triggered by a click event, instead of loading it

Can anyone assist me with a problem I am facing on my scripting page? I am currently working on a website that showcases properties. I would like to know how to prevent a specific div from loading when the page initially loads, and instead have its content ...

javascriptjqueryhtml

How to use plain JavaScript to extract the value from a textarea in GWT

Situation: I am currently developing a tampermonkey script to enhance certain GWT pages within a third-party application. Unfortunately, I do not have access to the source code or servers. Challenge: My task is to retrieve the value of a textarea element ...

javascripthtmlgwttampermonkey

Unlimited webpage scrolling downward

Recently, I was given a project to enhance a webpage and encountered an unusual issue. When the screen resolution drops below 900px (such as on small laptops and tablets) and you reach the bottom of the page, you can continue scrolling endlessly after seei ...

htmlinfinite-scroll

utilizing the data provided by a user in the "prompt" window within my HTML code

Looking to utilize user input from the prompt window. This is my custom JavaScript form: var answer; function load() { answer=prompt("what is your name?", "Write your name here"); return answer; } function hideNsee() { var HNS = docume ...

javascripthtml

Tips for choosing elements in jQuery that do not contain a particular element

How can I target elements in jQuery that do not contain a specific element within them? I am trying to create a sidebar that will close when the user clicks either the menu or the sidebar itself, excluding dropdown menus. Below is the structure of the menu ...

jqueryhtmlcss

"Font Awesome appears to be malfunctioning on all versions of Internet Explorer and Microsoft Edge

Having trouble with Font Awesome icons and their compatibility with Internet Explorer. The icons display correctly on all other browsers, but on IE or Edge, there is a blank space where the icon should be. I noticed differences in styling when comparing ...

htmlcssiconsfont-facefont-awesome

Position the Radio Buttons on Top of the Image

I need assistance with positioning radio buttons on top of an image at a specific location. Both the image and radio buttons are currently in a Div container, but I am unsure about the next steps. Below is where I would like to place the radio buttons (red ...

htmlcss

Looking to switch up the background color while scrolling, any tips?

I'm trying to change the background color of my navbar section on scroll, but I've had no luck so far. Below is the code I have been using: const [colorChange, setColorChange] = useState(false); const changeColor = () => { if (window.scro ...

javascriptcssreactjsjsx

Creating a layout with Bootstrap 4 cards split into two rows

I need to change my layout from 3 columns to 2 columns. I know I can achieve this using CSS like the code snippet below, but I'm curious if there's a built-in Bootstrap method for this: .card-columns { -webkit-column-count: 2; -moz-column-co ...

csstwitter-bootstrapbootstrap-4

How can I achieve a stylish alternating bottom-border effect for my website navigation menu?

Is there a way for me to achieve this navigation style? https://i.sstatic.net/LSNHL.png Here is the code I am working with currently. https://gist.github.com/anonymous/9c239f1b541aa26d461b I'm facing difficulty replicating the line style. Any sugges ...

cssnavigationlinealternating

How to prevent page refresh when hitting enter in jQuery form?

Currently, my form does not refresh the page when I click the button to submit it. However, if I press Enter while a text input is selected, the page will refresh. Is there a way to make pressing Enter on the text input perform the same action as clicking ...

javascriptphpjqueryhtmlajax

Having trouble implementing HTML font-family in C# code due to spaces

I am encountering a minor issue with setting the font-family in my C# code behind on an aspx page in Visual Studio Express 2015 for Web. I have written code using HtmlTextWriter to enable printing of a gridview when a button is clicked. The problem arises ...

c#htmlvisual-studio

Experience Markdown's Single Input Update Feature

I have recently developed a Markdown editor using Vue, similar to the examples found on Vue's website. However, my query is more related to implementation rather than Vue itself. Therefore, I am open to suggestions that do not necessarily involve Vue. ...

javascripthtmlcssvue.jsvuejs2

Material UI drop down select position placement

Having an issue with the dropdown position when using select from material UI. It's not appearing in the correct location. Desired Dropdown Position: https://i.sstatic.net/arRIF.png Current Dropdown Position: when opening the dropdown https://i. ...

cssreactjsdrop-down-menumaterial-uijsx