When CSS's position:fixed is utilized, overlapping divs may occur when combined with columns

So I have created an HTML layout with rows and columns, resembling this structure:

<div class="row">
    <div class="col-sm-2 col-lg-2 col-md-2">
         Some Code Here
    </div>
    <div class="col-sm-10 col-lg-10 col-md-10">
         Some Code Here
    </div>
</div>

The issue arises when I try to make the first column fixed while allowing the second one to scroll freely. Setting the CSS property position to fixed achieves the desired outcome initially. However, upon testing responsive design mode, the first column gets completely overlapped by the second one. Any suggestions on how to resolve this problem?

htmlcss

Answer №1

.col-sm-2{  
    position:fixed;
    width:40%;
    background:green;
}

.col-sm-10{
    width:58%;
    background:red;
    float:right;
}
<div class="row">
    <div class="col-sm-2 col-lg-2 col-md-2">
         Example Code!
    </div>
    <div class="col-sm-10 col-lg-10 col-md-10">
         Example Code!</br>
         Example Code!</br>
         . . . (repeated code snippets) . . .
         Example Code!</br>
    </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

Fixed-positioned elements

I'm facing a small issue with HTML5 that I can't seem to figure out. Currently, I have a header image followed by a menu div containing a nav element directly below it. My goal is to make the menu div stay fixed when scrolling down while keeping ...

javascriptjquerycsshtml

Issue with extra spacing within a div element in Bootstrap 5

Why is there extra spacing on the right side of my div? The image and text are supposed to take up 50% of the screen each. However, for some reason, there is additional spacing on the right that prevents this from happening. I am using Bootstrap 5. Click ...

htmlcssbootstrap-5

The width property is ineffective when used in conjunction with the d3 styling method

My goal is to create bar graphs where the width of each bar represents a person's age. However, I am having trouble applying the width attribute to the bars using the style method in d3 (I checked this by inspecting the elements in the browser). Other ...

csssvgd3.js

Chrome is experiencing a problem with anchor tags that have an href attribute set to a "blob:" URL and using a target of "_blank"

My current project involves developing a website feature that allows users to download a PDF version of a page. To achieve this, the generated HTML is rendered into a PDF on the server, which is then returned as a Base64-encoded PDF. This data is converted ...

javascripthtmlgoogle-chromepdfblob

"Troubleshooting issues with the functionality of AngularJS - Bootstrap Material Datetimepicker

I recently implemented a datetimepicker from this datetimepicker library into my AngularJS project. I have included jQuery, Moment, and the datetimepicker in the head tag. The input field is nested within an ng-repeat, and I have initialized the datetimepi ...

javascripthtmlangularjs

How to set the default value of a select dropdown in PHP

I came across this snippet of code: <td> <select class="versionSelect"> <option value="5" <?php if($item->version === "5") echo "selected='selected'"; ?>>5</option> <option value="6" <?php ...

phphtml

Issue with jquery_ujs: Font Awesome spinning icon animation functions properly in Chrome but not in Safari

I've integrated font-awesome-rails into my Rails project. When a user clicks the submit button on a form: The submit button should display an animated font-awesome spinner and change text to "Submitting...". The button must be disabled to prevent m ...

jquerycssruby-on-railsrubyfont-awesome

How can data be partitioned into individual td elements in Rails after a specific number of records?

Revamped solution: I made some changes to the original answer that guided me in the right direction. Here is my updated code snippet: <table class="fixed"> <tr> ...

htmlruby-on-railsruby-on-rails-3

jQuery Drag Drop Sorting Feature Fails to Work when Moving Items from List to Table Cell

I need assistance with creating a sortable list that can have its items dragged into a table cell, where the items can then be sorted within that cell. The process involves: Dragging a list item into the table cell. Sorting the list item in the secon ...

jqueryhtmlsortingjquery-ui

Transform a dropdown menu into an inverted footer

I stumbled upon a unique dropdown menu design that I want to tweak and reverse, making it an innovative "dropup" menu that opens from the bottom to the top. Currently, this is what I have: HTML <div class="get-started"> <a href="#" id="get-s ...

javascriptjqueryhtmlcssfooter

What is the best way to create a layout with two images positioned in the center?

Is it possible to align the two pictures to the center of the page horizontally using only HTML and CSS? I've tried using this code but it doesn't seem to work: #product .container { display: flex; justify-content: space-between; flex-w ...

javascripthtmlcssfrontend

Utilizing jQuery to clear out data sent through the $.post

I am currently working on developing a multi-part form that involves executing different scripts for each part. Each script checks for essential data and if this data is missing, it should return a string "false". While part 1 fails correctly by calling h ...

jqueryhtmlajax

Dealing with a routing issue in node.js/express involving JavaScript and CSS

I'm facing an issue. I need to set up a route from localhost.../cars to localhost../bmw/x1 On the localhost../cars page, there's a button that, when clicked, should load localhost../bmw/x1 This is the JavaScript code I have: const express = req ...

javascriptcssnode.jsexpressroutes

Creating a Footer with React and Material-UI: Step-by-step Tutorial

I'm facing an issue with the footer on my webpage. Here are my requirements: It should always be positioned at the bottom after the page content If there isn't enough content to fill the page, it should still stick to the bottom of the screen I ...

cssreactjsmaterial-uifooter

Firefox doesn't support CSS bubble functionality

Here is the CSS code I am using: .bubbledLeft, .bubbledRight{ position: relative; margin-top: 3px; max-width: 99%; clear: both; min-width: 99%; } .bubbledLeft{ float: left; margin-right: auto; padding: 14px 10px 4px 15 ...

htmlcsscross-browser

The problem of box-shadow conflicting with fluid width layouts has been a persistent issue,

After spending the past couple of days refining a page I created, I've encountered an issue following the implementation of box-shadow. I'm hoping someone can provide some advice on how to easily resolve this. The Scenario: I have a div with var ...

csswidthfluid-layout

What is the best way to manage the delay that occurs when using the append() function?

I'm using jQuery to append an array to a div and I want to display a loading indicator while this process is happening. I added a callback function to my append logic, which works fine. However, the loader disappears before the array is fully rendered ...

javascriptjqueryhtmlcssarrays

Application experiences issue when attempting to sign into a website

I'm encountering an issue while trying to log in to a webpage and check if the login was successful, as my app crashes during the process. Below is the snippet of code I am using: package com.shortey.logtoweb; import java.io.IOException; import java ...

androidauthenticationcrashhtml

Implement a "View All" link to toggle between displaying all items and keeping one item open by default,

I am working on multiple toggles for each letter of the alphabet. To make it easier for users, I want to add a "See All" button that will open any closed toggles. Additionally, I want the toggle for the letter A (div1) to be automatically open when the pag ...

jqueryhtml

Pass the chosen option to PHP using Ajax within the same webpage, utilizing HTML

My Goal: I am working on a HTML/PHP page that displays the home page of my website. One section on this page is dedicated to highscores, with data retrieved from a database. Users can use a Select box to choose how the highscores are sorted. View the high ...

javascriptphpjqueryhtmlajax