Tips for keeping the left grid column content visible while scrolling

I have set up a bootstrap grid with one row and two columns like this:

<div id="main">
  <div class="row">
    <div class="col-sm-2 first-col">
       Is there a way to keep this column fixed while scrolling?
    </div>
    <div class="col-sm-10 second-col">
       This column contains a large amount of text...
  </div>
</div>

The styling for this setup is as follows:

#main {
   height: 200px;
   overflow-y:scroll;
}

.row {
  height: 100%;
}

.first-col {
  border-right: 1px solid;
  height: 100%;
}

My goal is to have the first column (including the black border line) remain fixed while scrolling, with only the second column being scrollable.

You can see the issue in action in this JSFiddle.

Can anyone provide a solution?

--- SOLUTION ---

After considering your suggestions, I have found an alternative solution that works best for me, without relying on hardcoded padding or other tricks.

Here is the updated CSS:

To achieve the desired effect, I moved the scrollbar from #main to .second-col. This way, the second column is the only one that scrolls, keeping the first column fixed.

#main {
   height: 200px;
   overflow-y:hidden;
}

.row {
  height: 100%;
}

.first-col {
  border-right: 1px solid;
  height: 100%;
}

.second-col {
  overflow-y: scroll;
  height: 100%
}

You can view the updated layout in this JSFiddle.

Answer №1

Set padding for the second column

Below is the provided code snippet:

Answer №2

To create side-by-side DIVs, you can utilize a combination of fixed and float positions in CSS.

  • The first DIV should have a fixed position using CSS (position: fixed).
  • The second DIV should not have a defined position.

By setting the first DIV to be fixed, it will remain stationary while the second DIV scrolls.

If you want the two DIVs to appear next to each other horizontally, apply a float position to the second DIV.

Answer №3

If you want to avoid hardcoding margins, consider using percentages like in the following example:

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

#main {
   height: 200px;
   overflow-y:scroll;
}

.row {
  height: 100%;
}

.first-col {
  border-right: 1px solid;
  width: 19%;
  position:fixed;
}

.second-col{
  width:80%;
  margin-left:20%;
  top:0px;
  bottom:0px;
  left:0px;   
}
<div id="main">
  <div class="row">
    <div class="col-sm-2 first-col">
       How to make this column fixed during scroll?
    </div>
    <div class="col-sm-10 second-col">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum eget tellus et egestas. Donec augue sapien, aliquet vitae fermentum at, aliquet iaculis urna. Pellentesque dignissim eleifend erat vel tincidunt. Suspendisse et luctus augue, a facilisis ipsum. Donec dui leo, cursus pulvinar efficitur sed, eleifend non ex. Phasellus vestibulum...
    
    </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

Interactive CSS animation with a single click

I am in the process of developing a website and have incorporated CSS animations for dropdowns. However, I am looking to change it so that the dropdowns appear on click rather than hover in the submenu. I am struggling to make this adjustment with the curr ...

Issue with the button border not functioning correctly upon hover

I'm currently practicing my HTML and CSS skills, with a focus on creating buttons. I have encountered an issue where I want a colored border to appear around the button when hovered over. Unfortunately, I seem to be stuck and unable to achieve the des ...

Enhance your website navigation with Bootstrap Scrolling Nav: maintain consistent section heights and highlight the active

Can you help me with an issue I'm having when clicking on the <a> link in the navigation? The anchor point seems to be misplaced as the section headline (<h2>) is not visible. Is there a way to highlight the <a> links, perhaps by add ...

For JavaScript to run, it must be included in the HTML document and invoked externally using the <script src=...> tag

When it comes to my JavaScript code, I've encountered an interesting scenario where it only seems to run properly when it is both included in the HTML file and called externally like so: <script type="text/javascript" src="{{ url_fo ...

Verifying that the data has been successfully saved using JavaScript

When a user submits a small chunk of data via AJAX using a standard update action and a remote form, the information is sent to the action as javascript. The response is then rendered in javascript utilizing format.js. def update @message = Message.wher ...

Unsuccessful passing of the popstate event in jQuery bind

Currently, I am working on a small demo using the History API, but I seem to be facing some challenges: $(window).bind('popstate', function(event) { console.log('pop: ' + event.state); }); When I click on the 'P ...

Error: The value being evaluated in document.getElementById(x).style is not an object and is not supported

Desired Outcome for my Javascript: I am working with a div that includes an "onmouseover='getPosition(x)'" attribute which can be dynamically added and removed through my javascript by clicking a specific button. The function 'getPosition() ...

Utilizing jQuery to extract the value of a selected list item on click

I have been working on creating a list of items from JSON data and am facing an issue with retrieving the 'data-value' attribute of the clicked item. Here is my current code: const target = $('#list'); target.empty(); for (let i = 0 ...

Modify the color of the text input border upon interaction using CSS

Changing text input border color using CSS upon clicking Hey there! I have a text field in my HTML: <input type="text" value="test" id="ff"> Currently, I am using the following CSS to define its border: #ff { border: 1px solid #000; } I would ...

Tips for expanding the content of a blogger page to fill the entire frame of the page

Check out this page: . Currently, the video on the page does not fill up the entire screen. Any suggestions for a solution? ...

What are the steps to perform an Ajax request to an online web service?

I would like to send an AJAX request to an external web service using jQuery. However, I am encountering an error and unable to receive a successful response from the server. var url = "http://www.example.com/api/convert"; var requestData = { temperat ...

Add the information from the tag to the retrieval query path

How can I extract the information from this paragraph: <p id1="p-1-1"> Samsung Galaxy S8 Dual </ p> and insert it into this parameter: <a href="/about?param=HERE" class="btn2"> Learn more </a> The text within the p tag may chan ...

Update the label to an input field

My task involves adjusting the label that is generated in an input form using CakePHP and JQuery. $info = "test"; echo $this->Form->input('tipo_de_venta', array('type' => 'select', 'label' => 'Tipo ...

Run a PHP script on the current page upon choosing an option from a dropdown list with the help of Ajax or JavaScript

I'm currently working on a MySQL query that needs to be executed when a user selects options from multiple dropdown lists. What I am looking for is the ability to automatically run a query related to the selected dropdown list option using AJAX/JavaS ...

The grid is experiencing improper sizing in the row orientation

Challenges with Grid Layout In my current project, I am facing a challenge in creating a responsive layout with a dynamic grid within a page structure that includes a header and footer. The main issue arises when the grid items, designed to resemble books ...

In my current project, I am working with Knockout and TypeScript but I am encountering difficulties in firing the window-resize event

Instead of using jquery, I prefer working with a custom handler for the $(window).resize(function () { ... event. If there is a way to achieve this without relying on jquery, please feel free to share it in the comments below. The code snippet below show ...

Why aren't jQuery events triggering following an AJAX request?

I have created a website that utilizes fading effects to transition between sections while loading new content. One of the features includes enlarging an image upon clicking, which is achieved through a jQuery event trigger. The issue I am facing is that ...

Looking for a way to implement a vertical autoscroll <ul> list that responds to mouse movement using JavaScript and jQuery

Could you assist me in enabling the list items to be moved using mouse movement? When the user moves the mouse cursor vertically upward over the list, the list should scroll downward. If the user moves the mouse cursor downward over the list, the list shou ...

Tips on how to efficiently wrap content within a column layout, and to seamlessly shrink it if necessary

I recently encountered an issue where I am attempting to create a three-column layout with each column filled with a dynamic number of divs (boxes) ranging from 5 to 15, each with its own height based on its content. These divs are expected to: 1) Be dis ...

Obtaining your CSGO inventory via Steam API using jsonp: A step-by-step guide

Hey there! I'm currently facing an issue while trying to access a player's CSGO inventory using Valve's API. Unfortunately, I keep running into the error message stating that no 'access-control-allow-origin' header is present on th ...