Utilizing a Bootstrap column design with two columns in place - one column set at a fixed width while the second column stretches across the remaining

Question

Utilizing a Bootstrap column design with two columns in place - one column set at a fixed width while the second column stretches across the remaining

Need help with adjusting two columns on a webpage? The right column is fixed at 300px width, while the left column should take up the remaining space. Using flex works well, but when adding a responsive ad to the left column, it extends beyond the available space and causes the right column to collapse.

<style>
.rcol {
    width: 300px;
}
</style>

<div class="row">
    <div class="col"></div>
    <div class="rcol d-none d-lg-block"></div>
</div>

In order to address this issue, one solution suggested is setting the width of the left column to:

width: calc(100% - 300px);

However, this method may be considered a bit of a workaround. Are there any alternative solutions available?

css bootstrap-4

Answer 1

Answer №1

There are 3 options available:

Option 1: Demo showcasing margin-right on the left column
Option 2: Demo illustrating max-width / width on the left column
Option 3: Demo featuring padding-right on the row

Here is Demo -1:

.rcol {
  width: 300px;
  position:fixed;
  right:0;
  background-color:transparent;
  border-left:1px solid black,
  height:100vh;
}
.col:nth-of-type(1){
  background-color:red;
  height:200vh;
}

@media (min-width: 1200px){
  .col:nth-of-type(1){
     margin-right: 315px; /* 300px + padding 15px; */
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bddfd2d2c9cec9cfdccdfd899388938e">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="row mx-0">
    <div class="col"></div>
    <div class="rcol d-none d-lg-block">I am fixed</div>
</div>

Presenting Demo -2:

.rcol {
  width: 300px;
  position:fixed;
  right:0;
  background-color:transparent;
  border-left:3px solid black,
  height:100vh;
}
.col:nth-of-type(1){
  background-color:red;
  height:200vh;
}
@media (min-width: 1200px){
  .col:nth-of-type(1){
    max-width: calc(100% - 315px); // 300px + padding 15px; 
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff9d90908b8c8b8d9e8fbfcbd1cad1cc">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="row mx-0">
    <div class="col"></div>
    <div class="rcol d-none d-lg-block">I am fixed</div>
</div>

Lastly, check out Demo -3:

.rcol {
  width: 300px;
  position:fixed;
  right:0;
  background-color:transparent;
  border-left:1px solid black,
  height:100vh;
}
.col:nth-of-type(1){
  background-color:red;
  height:200vh;
}

@media (min-width: 1200px){
  .row-padding-300{
    padding-right: 300px;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9dbd6d6cdcacdcbd8c9f98d978c978a">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="row mx-0 row-padding-300">
    <div class="col"></div>
    <div class="rcol d-none d-lg-block">I am fixed</div>
</div>

Answer 2

There are 3 options available:

Option 1: Demo showcasing margin-right on the left column
Option 2: Demo illustrating max-width / width on the left column
Option 3: Demo featuring padding-right on the row

Here is Demo -1:

.rcol {
  width: 300px;
  position:fixed;
  right:0;
  background-color:transparent;
  border-left:1px solid black,
  height:100vh;
}
.col:nth-of-type(1){
  background-color:red;
  height:200vh;
}

@media (min-width: 1200px){
  .col:nth-of-type(1){
     margin-right: 315px; /* 300px + padding 15px; */
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bddfd2d2c9cec9cfdccdfd899388938e">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="row mx-0">
    <div class="col"></div>
    <div class="rcol d-none d-lg-block">I am fixed</div>
</div>

Presenting Demo -2:

.rcol {
  width: 300px;
  position:fixed;
  right:0;
  background-color:transparent;
  border-left:3px solid black,
  height:100vh;
}
.col:nth-of-type(1){
  background-color:red;
  height:200vh;
}
@media (min-width: 1200px){
  .col:nth-of-type(1){
    max-width: calc(100% - 315px); // 300px + padding 15px; 
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff9d90908b8c8b8d9e8fbfcbd1cad1cc">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="row mx-0">
    <div class="col"></div>
    <div class="rcol d-none d-lg-block">I am fixed</div>
</div>

Lastly, check out Demo -3:

.rcol {
  width: 300px;
  position:fixed;
  right:0;
  background-color:transparent;
  border-left:1px solid black,
  height:100vh;
}
.col:nth-of-type(1){
  background-color:red;
  height:200vh;
}

@media (min-width: 1200px){
  .row-padding-300{
    padding-right: 300px;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9dbd6d6cdcacdcbd8c9f98d978c978a">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="row mx-0 row-padding-300">
    <div class="col"></div>
    <div class="rcol d-none d-lg-block">I am fixed</div>
</div>

Answer 3

Answer №2

It appears that implementing the solution at the bottom was beneficial. (Insert Adsense script in the footer)

Link to the referenced solution

Answer 4

It appears that implementing the solution at the bottom was beneficial. (Insert Adsense script in the footer)

Link to the referenced solution

Utilizing a Bootstrap column design with two columns in place - one column set at a fixed width while the second column stretches across the remaining

Answer №1

Answer №2

Similar questions

Next JS Event Listener Failing to Detect Scroll Events

"Picture positioned on the edge of the container, just on one

Disabling the outline border on bootstrap select elements

Move the footer to the bottom of the page

When triggered by a click, the function gradually fades in and out. It superimposes one image on top of another, but unfortunately, the sizes

Height of CSS border-top

What could be the reason for the font awesome icon f105 not displaying properly?

Implement a feature in JavaScript that highlights the current menu item

struggling to adjust image dimensions using bootstrap styling

Positioning three squares with the same class adjacent to each other by utilizing absolute positioning

What is the process for customizing the arrow of a <select> dropdown menu exclusively?

The curious case of CSS nth-of-type quirks

Personalizing CSS for a large user base

What is the best method for selecting or isolating the code for a single animation created using JavaScript?

Is it not feasible to place a well within a column using Bootstrap?

The dilemma between Nuxt Js global CSS and Local CSS

Incorporated new code into the website, functioning properly, although it appears to keep scrolling endlessly below the footer

The issue of Bootstrap icons not displaying on the front-end arises when integrating them into a Vuejs Template

Is there a way to make a picture fill the entire background?

Exploring the functionality of CSS class selectors (.class-name) when used alongside CSS tag selectors (div, etc...)