Resizable Bootstrap column-md-4

I need to make a bootstrap column fixed position (col-md-4). This is for a shop layout with 2 columns:

  1. Shop content (long & scrollable) col-md-8
  2. Cart content (short & fixed so it stays visible while scrolling the shop content) col-md-4

I'm not sure how to achieve this properly in bootstrap.

Here is the desired outcome:

Currently, I tried setting the col-md-4 position to fixed using the css property, but it's not perfect.

As shown in this image, when the col-md-4 position is fixed, its width (33% for col-md-4) is wider than intended.

Normally, col-md-4 has a 33% width css property based on its parent container.

But when the position is fixed, for some reason, the 33% is calculated based on the screen width. So if the screen resolution is 2500px, it would be 33% of 2500px instead of the container's 1170px, causing the col-md-4 to be wider and overflow the container.

I could potentially fix this in javascript by recalculating the width, but I'm wondering if there is a better way to handle this in bootstrap (which I believe there is).

csstwitter-bootstrapcss-position

Answer №1

I would opt for a different approach in this scenario instead of using Bootstrap col classes. Consider using the following code for a better visual appearance:

<div class="content"></div>
<div class="cart"></div>

.content {
    width: 100%;
    padding-right: 200px;
}

.cart {
    width: 200px;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99;
}

While Bootstrap is convenient, keep in mind that the col class is floated. In your specific case, this may not be the best option as you want your .cart sidebar to be fixed and not affected by float rules.

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

Is it possible to alter the background behind each word in a text using only CSS?

I have a question about styling quotes by highlighting each word in the text with a background color. The issue I'm facing is that when using a solid background, there are no gaps between the colors. How can I achieve a result similar to this, but wit ...

css

Displaying content on the <div> element

Looking for recommendations for a jQuery plugin or JavaScript solution that allows me to load a full "view" into a <div> when a user clicks on a link. The challenge I'm facing is that I have 8 pages, with the Homepage consisting of 3 divisions: ...

javascriptjqueryhtmlcssasp.net-mvc

Initially, the 'display none' CSS command may not take effect the first time it is used

I am currently working on a slideshow application using jquery.transit. My goal is to hide a photo after its display animation by setting the properties of display, transform, and translate to 'none' value. Although the slideshow application work ...

javascriptjquerycss

Removing the gaps within table cell contents

Is there a way to eliminate the border space between cells in a table? Despite using cellspacing, I still see a thin white border. Any suggestions on how to fix this? <body> <center><table style="border-collapse: collapse; width:400px; bo ...

phpcsshtml-table

Conceal the countdown clock and reveal the message box

I am attempting to create a functionality where the text box will replace the timer when it reaches 0, and then the timer will be hidden. I am seeking a straightforward solution using either the 'v-show' or 'destroy' property in vue.js ...

javascripthtmlcssvue.jsvuetify.js

Within the HTMLDivElement.drop, the parent element now encapsulates the new child element

I've encountered a DOM exception that has me stuck. My issue involves div elements and a button - when the user clicks the button, a random div is selected and another div with a background-color class is appended to it. Essentially, clicking the butt ...

javascripthtmlcssdrag-and-drop

Achieving CSS Buttons That Change to Green When Clicked and STAY Green

I've been tasked with working on a front-end project for a website that involves buttons changing color when clicked and staying that color. Here is the CSS <style> code I have written for these specific buttons: .button { background-color ...

javascriptjqueryhtmlcss

Adjust the left margin to be flexible while keeping the right margin fixed at 0 to resolve the spacing

To create a responsive design that adjusts based on screen size, I initially set the content width to 500px with a margin of 0 auto. This meant that for a 700px screen, the content would remain at 500px with left and right margins of 100px each. Similarl ...

javascriptjqueryhtmlcss

What is the best way to scale a div proportionally within a bootstrap grid?

Despite spending hours reading numerous online sources, I am still struggling to fully grasp the CSS/HTML box model. Specifically, I am attempting to create sections with a ratio of 3:2, where 3 represents the width and 2 represents the height. https://i.s ...

htmlcsstwitter-bootstrapsass

Unsupported MIME format

I'm encountering an issue where my stylesheet is not applying to my handlebars. It was working fine yesterday, but today I'm seeing a MIME error and I'm unsure of the reason behind it. Any assistance would be greatly appreciated. Server Cod ...

cssnode.jsexpress

Using an overlay with figure-img in Bootstrap 4 is a visually appealing design

I need assistance with adding an overlay to only the bootstrap 4 figure-img. In order to achieve this, I inserted a div with the class overlay beneath the figure-img. Below is the code snippet: <div class="col-md-4"> <figure class="service tex ...

htmltwitter-bootstrapcssbootstrap-4

To make a JavaFX label stand out, simply prepend a vibrant red asterisk at the start of

I'm facing a challenge with my SceneBuilder project. I have developed a scene that consists of several labels, and I want to highlight some of them by adding a red asterisk at the beginning of their text. Unfortunately, I haven't been able to fin ...

cssjavafx

Maintain the fixed position of the table header while scrolling

I am facing an issue with my table setup - I want the header to stay fixed while scrolling through the body. Here is how my table structure looks: <table> <thead> <tr> <th>Header 1</th> ...

jqueryhtmlcsshtml-tablecss-position

Guide to setting up a search function with class name filtering

I am currently managing a website with multiple items, each represented by individual div elements. While all items share one common class name, they also have several other class names serving as tags to differentiate them (some tags may overlap between d ...

javascripthtmlcss

How come modifying the css of one component impacts all the other components?

Issue: I am struggling to make CSS changes only affect the specific component I want, without impacting other elements on the page. My goal is to style my dropdown menu without affecting other text input fields: https://i.sstatic.net/Caidv.png Background ...

cssangular

Dynamic jQuery slideshow featuring a variety of animations applied to individual elements

I'm interested in creating a custom jQuery slideshow that involves animating HTML elements within each slide differently. Specifically, I would like to have 3 divs sliding out to the left with delays on 2 of them, and then being replaced by equivalen ...

javascriptjquerycssjquery-animateslideshow

Styling with CSS: Utilize flexbox to adjust the layout of two elements, ensuring they

Trying to float an image to the right side of a paragraph is proving to be more challenging than anticipated. 100px +-------------------------+ +------------+ | | | | | ...

htmlcsscss-float

Alignment of text to the left can be achieved by using either relative or absolute

After researching several solutions, none seem to solve the issue I am experiencing. My code is meant to create two red colored boxes as shown below: .redboxes-horz { width: 100%; margin-bottom: 50px; height: auto; top: 0; right: 0; } ...

htmlcss

Retrieving information from a dynamically generated HTML table using PHP

I have successfully implemented functionality using JavaScript to dynamically add new rows to a table. However, I am facing a challenge in accessing the data from these dynamically created rows in PHP for database insertion. Below, you will find the HTML ...

javascriptphpjqueryhtmlcss

How to prevent jQuery from continually recalculating width on window resize?

Here is the code I've been working on: http://jsfiddle.net/7cXZj/ var callback = function () { $('.progress-bar').width($('.progress-bar').parent().width() - 190); $(".mainpart-background").animate({ width: "80%" }, 80 ...

javascriptjquerycssjquery-animate