The alignment of Bootstrap columns is causing them to overlap

I'm currently working with the bootstrap 4 grid system, trying to create a layout with two columns where the left column is fixed and the right column is scrollable. The issue arises when I set the position of the left column to fixed, as it is taken out of the flow of the page and the right column overlaps it. I tried using offset-md which works for medium-sized screens, but when the browser is resized to a smaller screen, the overlap issue returns.

This is my HTML:

  <div class="row">

     <div class="col-md-6 col-sm-12 h-100"  id="left">

         <div id="introduction" >
          <h1>Hi, I'm Nawal Shaukat! </h1>   
          <p>Full Stack Web Developer</p>
         </div>

     </div>

     <div class="col-md-6 offset-md-6 col-sm-12" id="right">     

     <h2>Get to know me!</h2>                
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<hr>
  </div>
</div>
</div>

my css:

 html,body{
         height: 100%;
         margin:0;
     }

     #left{
         position:fixed;
         height:100%;
         background-image:url("profile-pic.png");
         background-repeat:no-repeat;
         background-size:cover;  
     }
htmlcsstwitter-bootstrap

Answer №1

Is this the desired format? I have applied viewport height to both classes and set #right to be scrollable.

#left, #right {
    height:100vh;
}

#right {
    overflow-y: scroll; 
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="row m-0">

    <div class="col-md-6 col-sm-12"  id="left">

        <div id="introduction" >
            <h1>Hi, I'm Nawal Shaukat! </h1>   
            <p>Full Stack Web Developer</p>
        </div>

    </div>

    <div class="col-md-6 col-sm-12" id="right">     
        <h2>Get to know me!</h2>                
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.qua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <hr>
    </div>
</div>

Answer №2

To achieve the desired layout, you can include the following CSS code:

#right {
  margin-left: 52%;
}

When using position:fixed;, the next element may overlap the fixed element, so you will need to adjust the margin of the next element to avoid this. Here is the code snippet to help illustrate this:

html,
body {
  height: 100%;
  margin: 0;
}

#left {
  position: fixed;
  height: 100%;
  background-image: url("profile-pic.png");
  background-repeat: no-repeat;
  background-size: cover;
}

#right {
  margin-left: 54%;
}
<div class="row">

  <div class="col-md-6 col-sm-12 h-100" id="left">

    <div id="introduction">
      <h1>Hi, I'm Nawal Shaukat! </h1>
      <p>Full Stack Web Developer</p>
    </div>

  </div>

  <div class="col-md-6 offset-md-6 col-sm-12" id="right">

    <h2>Get to know me!</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <hr>
  </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

Tips for implementing a linear gradient on a bar graph using Highcharts

I'm trying to create a bar chart using highcharts, and I want to apply a linear gradient for the bar fill color. However, I am not sure how to set this up. Can anyone provide some guidance or ideas? Here is an example of what I'm hoping to achie ...

jquerycsshighcharts

Modify the text of the "search" button in bootstrap4

Clicking the "Search" button on my website redirects me to How can I modify the URL from "search" to "my_search" in this link? I want the link to be I am using the Django web framework. The fix should also support queries from the form. My code vacanc ...

pythonhtmldjangobootstrap-4

Having trouble retrieving data from the fetch database. The login page seems to be stuck in a continuous loop and won't let me

Every time I attempt to log in through: webhost/adminlogin.php, I am redirected back to the same page. Did I forget to add something? Thank you for your assistance. Here is my script: This is what is included in my adminlogin.php file: <?php session ...

phphtmlmysqlmysql-error-1064

Is there a way to reverse the animation playback in Angular?

I am working on an animation that involves a box fading from its original color to yellow. However, I would like to achieve the opposite effect: when the page loads, I want the box to start off as yellow and then fade back to its original color. The challe ...

javascriptcssangularanimation

Leveraging IE conditional comments for including CSS or JavaScript files can lead to an increase in the number of HTTP

Our web designer has implemented special pages for Internet Explorer by using IE-specific comments. This means that certain stylesheets are only loaded if the user is using a specific version of IE: <!--[if lt IE 7]> <link type="text/css" rel="st ...

javascriptcssinternet-explorerconditional-comments

Having trouble getting the HTML input textbox onChange event to fire properly?

This is the code I have been working on: <script language="JavaScript"> function toggle() { if (this.value=='1') { document.getElementById('dbOn').style.visibility='visible'; } el ...

javascripthtmltextboxonchange

What causes the HTML element's X position value to double when its X position is updated after the drag release event in Angular's CDK drag-drop feature?

I am facing a challenge with an HTML element that has dual roles: Automatically moving to the positive x-level whenever an Obsarbalve emits a new value. Moving manually to both positive and negative x-levels by dragging and dropping it. The manual drag a ...

javascripthtmlcssangulardrag-and-drop

The importance of blending classes versus isolating classes in CSS selectors

Could somebody please direct me to the CSS hierarchy rules concerning "concatenated classes" versus "separated classes"? Furthermore, what are the correct terms for "concatenated classes" versus "separated classes" (I suspect that is why the documentation ...

csscss-selectors

a problem with images overflowing in CSS

I am currently working on setting up a personal blog for myself, but I have encountered an issue with the overflow property. On my home page, I have a div that contains text and images for reviews. When users click on the "read more" button, the full parag ...

htmlcss

What is the best way to add a class to the initial HTML element in my specific scenario?

Currently utilizing the angular framework in my application. Desire to assign a specific class to only the initial element within my ng-repeat iteration. <div class='initialOnly' ng-repeat = 'task in tasks'>{{task.chore}}</di ...

javascripthtmlcssangularjs

What is the best way to dynamically include CSS in AngularJS?

Hello, I am currently attempting to add CSS dynamically but for some reason it is not working. Below you will find the code that I have been using: angular.module('myApp', [ 'myApp.controllers','myApp.services']). config([&ap ...

cssangularjs

Switch or toggle between colors using CSS and JavaScript

Greetings for taking the time to review this query! I'm currently in the process of designing a login form specifically catered towards students and teachers One key feature I'm incorporating is a switch or toggle button that alternates between ...

javascriptjqueryhtmlcss

What is the process for connecting two scripts together?

Purpose : I am currently working on a Firefox add-on with the goal of tracking the online status of my team members in a game. Current Progress : I have developed an initial JavaScript script that runs upon opening the browser. This script creates and ...

javascripthtmlfirefox-addon

How to align a div with embedded tweets in the center

I am looking to include a series of tweets from Twitter in a div on a basic webpage. The challenge is centering this div horizontally on the page. I have tried using: <div style="text-align:center"> and also: <div style="width: 900px; display ...

htmlcsscentermargin

The command 'source-highlight' is not a recognized internal or external command

Recently, I delved into the world of asciidoc and decided to create an example in Python. However, every time I attempt to display a code blog in HTML, I encounter an exception that says 'source-highlight' is not recognized as an internal or exte ...

pythonhtmlasciidoc

Utilizing Selenium with Python to choose a specific option from a dropdown selection

I am currently experimenting with using Selenium in Python to choose the option "Custom date" from the dropdown menu displayed in the image below: https://i.sstatic.net/ASHU2.png The hierarchy of divs is structured as shown here: https://i.sstatic.net/xtA ...

javascriptpythonhtmlcssselenium

Python Flask login screen not showing error message

Currently, I'm in the process of developing a login screen that incorporates Bootstrap and utilizes jQuery keyframes shaking effect. The backend functionality is managed by Flask. However, I seem to be encountering an issue where the error message "Wr ...

javascripthtmljqueryflaskflask-login

How do you efficiently include several elements within a single column in Boostrap 5?

I've been working with Bootstrap 5 to display a grid of images similar to this link, but the images are not displaying as intended due to some CSS code. #projects img { width: 100%; height: 100%; } <section id="projects"> ...

htmlcssbootstrap-5

Is there a way to limit HTML wrapping to 79 characters in TextMate?

I'm currently using TextMate to work on my HTML projects. When I select View > Wrap > 79 characters for certain types of content, it wraps at 79 characters as expected. But when it comes to working with HTML, this feature doesn't seem to ...

htmltextmate

Steps for adding a background image in ASP.NET MVC4

I recently removed the reference to the master page from the head section @{ Layout = null } After making changes in my CSS: html { background-image:url('Images\BGP.jpg'); } However, I didn't see any changes. Any suggesti ...

cssasp.net-mvchtml