What can I do to prevent a scrolling div that exceeds the height of the div itself?

I'm trying to align an image to the right side with a fixed position and have a large text content on the left side. I want the text content to be scrollable using bootstrap. Here is my code snippet.

Thank you for your time and any suggestions!

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container" style="margin-top: 50px;">
<div class="row pull-right" style=" width: 60%;float: right;"><img src="https://picsum.photos/200/300/?random" alt="" width="1000px" height="1000px"></div>
<div class="row pull-left" style=" width: 35%;float: left;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis accusamus atque expedita debitis reprehenderit, adipisci, nobis illo est in unde tempora fugit veniam suscipit voluptatibus sint ut sed amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero reiciendis...

jquerycssbootstrap-4stickyscrollspy

Answer №1

One way to achieve this layout is by setting the height property of both columns to a fixed value, such as 600px, and then applying overflow: scroll to create scrolling paragraphs within the columns.

If you know the height of the img, you can give the two columns the same height. Otherwise, choose a suitable number for the height.

Bootstrap-3

.mt-10 {
  margin-top: 10rem;
}

.col-left,
.col-right {
  max-height: 600px;
}

.overflow-scroll {
  overflow: scroll;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container mt-10">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-left overflow-scroll">
      <p>Lorem ipsum dolor sit amet....(content truncated)....ut.</p>
    </div>
    <div class="col-xs-12 col-sm-6 col-right">
      <img src="https://picsum.photos/1000/1000/?random" alt="" class="img-responsive">
    </div>
  </div>
</div>

Check this pen

Bootstrap-4

.col-left,
.col-right {
  height: 600px;
}

.overflow-scroll {
  overflow: scroll;
}
<div class="container mt-5">
  <div class="row">
    <div class="col-12 col-sm-6 col-left overflow-scroll">
      <p>Lorem ipsum dolor sit amet....(content truncated)....ut.</p>
    </div>
    <div class="col-12 col-sm-6 col-right">
      <img src="https://picsum.photos/500/600/?gravity=east" alt="" class="img-fluid">
    </div>
  </div>
</div>

Check this pen

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

The content inside the inner div does not stretch to match the height of its parent element

I want to address a specific issue I am facing with my div structure. Although it may seem similar to other questions on StackOverflow, none of the existing solutions have worked for me. The problem is that I have two child divs inside a parent div. The h ...

htmlcss

How can you use the transform property in CSS to rotate the dropdown arrow by 180 degrees and move it vertically by 2 pixels?

gradeexpanded:false, gradeOnClick: function (event) { this.gradeexpanded = !this.gradeexpanded; }, .dropdown-check-list { margin-left: 35px; displa ...

htmlcssvue.js

"The Power of jQuery AJAX: Harnessing the Success Context

I'm having some issues with my AJAX function that isn't behaving as expected. It seems that the use of "this" inside the AJAX success callback does not refer to the same "this" as in the showSnapshotComment function's scope. I attempted to ...

jqueryajax

Getting user input types with php

Is there a PHP alternative to the following jQuery code: var allInputs = $(":input"); allInputs.attr('type'); I am looking for a way to retrieve the types of each post variable sent to a PHP script without relying on JavaScript or jQuery. It wo ...

phpjquery

Tips for altering the value of a previously checked checkbox in jQuery

My current task involves creating a form using JavaScript. There is an option to add an address dynamically by clicking on a specific link that triggers the function addNewAddress(). The form layout includes input fields for Address Line 1 and Address Lin ...

javascriptjquery

Is there a way to load and play different sounds on multiple audio players based on the length of an array?

I am attempting to load various sounds (.mp3 audio) on separate audio players that are displayed on a single HTML page. The number of players displayed on the screen is determined by the length of the array. In this specific example, I have 3 elements in t ...

javascripthtmlcssaudio

Animate images using mouse vertical movement

Creating websites is just a hobby for me, not something professional. Recently, I came across a beautifully designed website that had some unique features I hadn't seen before, like placing three images in one div (which I researched and learned how t ...

javascriptjqueryhtmlcss

The navigation bar logo on my website has mysteriously vanished

Even though my main website is built with Wordpress, I decided to start a blog using Tumblr. You can visit my website here: And here is my blog: I tried to replicate the same structure of my website on my Tumblr theme. However, I encountered an issue w ...

htmlcsswordpressimagetumblr

After integrating WordPress into Laravel, the Ajax post feature is failing to function properly

My Ajax post was functioning perfectly until I integrated Wordpress into my project. Now, after the integration, a 404 error is being displayed. However, upon debugging with firebug, it is evident that the response is accurate. The code for integrating Wo ...

phpjqueryajaxwordpresslaravel

Error found in Twitter Bootstrap popover plugin: `this.isHTML` function is missing

I took the example directly from their website: http://jsfiddle.net/D2RLR/631/ ... and encountered the following error: this.isHTML is not a function [Break On This Error] $tip.find('.popover-title')[this.isHTML(title) ? 'html&apos ...

javascriptjquerytwitter-bootstrappopover

Strategies for dividing a group of students into various teams with an equal balance of boys and girls

I am currently working on a programming project for school that involves assigning each student to a group in such a way that all groups have an equal number of boys and girls. In this project, there are two existing groups (A and B) with some students al ...

javascriptjqueryalgorithmknapsack-problemsubset-sum

What is the best method for displaying the toggle button for Drawer/Sidebar above the main content and appbar?

After reviewing Vatsal's suggestion, it appears that moving the toggle button above the drawer is the solution to our main issue. By taking advantage of the open state of the drawer, we can adjust the left property of the button in the toggleButton cl ...

cssreactjsmaterial-ui

Mastering Bootstrap 4 flexbox for optimal content filling: A comprehensive guide

I am currently working on an angular app integrated with bootstrap 4. The challenge I am facing is related to the layout design. I have a fixed navbar at the top and a content area below it. Within the content area, I have a div that includes header and fo ...

csstwitter-bootstrapangularflexboxbootstrap-4

What could be causing this div to shift positions when the browser window is resized?

When resizing the browser, I'm having trouble keeping the div boxes in place. The bottom-right lower div (vd-grid-sub-box) keeps shifting away when I slightly decrease the browser size. Additionally, vd-grid-right-col overlaps with the banner if the s ...

htmlcss

The fixed blocks are covering the Blueimp gallery within the relative container

Check out this DEMO I created to showcase something interesting. In this demo, you will find a basic example of setting up a blueimp gallery, a navigation bar, and a button. <div class="nav">nav</div> <div class="wrapper"> <div id ...

javascripthtmlcssimage-gallery

Using a border-radius of 50% is causing imperfect circles to appear in the Chrome browser

Typically, using border-radius: 50% is effective for many situations, and in Chrome it creates a circle appearance. However, when attempting to rapidly rotate a circle in this specific case, an issue arises. Is this a glitch with Chrome's border-radi ...

cssgoogle-chrome

Make the navigation bar stay at the top of the page when scrolling past another element with a top position of 100vh

Trying to explain a unique concept here. I want a nav bar fixed in the position of top:100vh, so that as I scroll down and reach the next section, the navbar sticks at the top rather than staying stuck at the beginning with position:fixed top:0. The aim is ...

javascripthtmlcsssass

Issue with Bootstrap 4 custom list-group collapse arrow not working as expected

I recently customized a Bootstrap 4 list-group to include collapse functionality. In my customization, I added a CSS caret arrow with the following behavior: 1. Initially pointing down 2. Clicked once, it points up 3. Clicked again, it returns to the init ...

htmlcssbootstrap-4

Bootstrap's nested rows do not adhere to the correct width specifications

After reading the post titled How to make a Bootstrap column span multiple rows?, I attempted to replicate the concept but encountered some difficulties. This is what I came up with: https://codepen.io/saka-rauka1/pen/MWodjao?editors=0010 render() { r ...

reactjsbootstrap-4

The curly brackets in Vue.js do not function properly within a v-for loop when there is an object nested inside an array

I am a novice in vuejs and I am attempting to utilize mustache {{}} to render elements of an array. It works fine for simple arrays, but when I try it with an array containing objects, it doesn't seem to work. Is there an issue with my code, or is it ...

htmlcssvue.jsmustache