Restrict the height of a division based on the adjacent division

Question

Restrict the height of a division based on the adjacent division

Within the parent div, I have two child div elements that are meant to be positioned side by side. The first element contains an image which loads dynamically, meaning its height is unknown in advance. I want the parent div's total height to match the height of the image - achieved by setting the height to auto. However, the challenge arises with the text on the right. I need it to fill the available height next to the image without extending beyond it and creating a gap below the image. To ensure this, I would like the text to be cut off with overflow set to scroll if it becomes too long.

The main issue I face is how to make the text element on the right respect the height of the image on the left. Since the image cannot be the parent element to the text due to being an image itself, passing its height to the text seems tricky. One potential solution could involve placing the image on the right as well, hiding it, and positioning the text above it. But this method might not be the most elegant approach.

If you have any suggestions or tips on how to address this issue, they would be greatly appreciated.

Update: As I am using React, I would prefer to avoid relying on jQuery for any possible solutions.

html css image height auto

Answer 1

Answer №1

By defining a fixed width for the image, you can achieve varying heights with this combination of HTML and CSS. This setup also allows for scrollable text alongside the images:

* {
  margin: 0;
  padding: 0;
}

:root {
  --image-width: 200px;
}

.container {
  position: relative;
  margin: 20px auto;
  max-width: 600px;
}

img {
  width: var(--image-width);
}

p {
  overflow-x: auto;
  position: absolute;
  top: 0;
  left: calc(var(--image-width) + 10px);
  bottom: 0;
  right: 0;
}

<div class="container">
  <img src="https://source.unsplash.com/random/200x200">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed risus ultricies tristique nulla aliquet enim. Sed pulvinar proin gravida hendrerit lectus a. Consectetur a erat nam at lectus urna duis convallis convallis. Egestas integer eget aliquet nibh praesent tristique magna. Molestie a iaculis at erat pellentesque adipiscing. Tincidunt arcu non sodales neque sodales ut etiam. Lobortis mattis aliquam faucibus purus in. Suspendisse ultrices gravida dictum fusce ut placerat orci. Enim ut tellus elementum sagittis vitae et leo duis ut. Adipiscing elit ut aliquam purus sit amet luctus. Sit amet dictum sit amet justo donec. Elementum eu facilisis sed odio. Vitae suscipit tellus mauris a diam maecenas. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Condimentum mattis pellentesque id nibh tortor id. Odio morbi quis commodo odio aenean sed adipiscing diam. Sed cras ornare arcu dui vivamus. Fringilla phasellus faucibus scelerisque eleifend.</p>
</div>

<div class="container">
  <img src="https://source.unsplash.com/random/200x100">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed risus ultricies tristique nulla aliquet enim. Sed pulvinar proin gravida hendrerit lectus a. Consectetur a erat nam at lectus urna duis convallis convallis. Egestas integer eget aliquet nibh praesent tristique magna. Molestie a iaculis at erat pellentesque adipiscing. Tincidunt arcu non sodales neque sodales ut etiam. Lobortis mattis aliquam faucibus purus in. Suspendisse ultrices gravida dictum fusce ut placerat orci. Enim ut tellus elementum sagittis vitae et leo duis ut. Adipiscing elit ut aliquam purus sit amet luctus. Sit amet dictum sit amet justo donec. Elementum eu facilisis sed odio. Vitae suscipit tellus mauris a diam maecenas. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Condimentum mattis pellentesque id nibh tortor id. Odio morbi quis commodo odio aenean sed adipiscing diam. Sed cras ornare arcu dui vivamus. Fringilla phasellus faucibus scelerisque eleifend.</p>
</div>

<div class="container">
  <img src="https://source.unsplash.com/random/200x400">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed risus ultricies tristique nulla aliquet enim. Sed pulvinar proin gravida hendrerit lectus a. Consectetur a erat nam at lectus urna duis convallis convallis. Egestas integer eget aliquet nibh praesent tristique magna. Molestie a iaculis at erat pellentesque adipiscing. Tincidunt arcu non sodales neque sodales ut etiam. Lobortis mattis aliquam faucibus purus in. Suspendisse ultrices gravida dictum fusce ut placerat orci. Enim ut tellus elementum sagittis vitae et leo duis ut. Adipiscing elit ut aliquam purus sit amet luctus. Sit amet dictum sit amet justo donec. Elementum eu facilisis sed odio. Vitae suscipit tellus mauris a diam maecenas. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Condimentum mattis pellentesque id nibh tortor id. Odio morbi quis commodo odio aenean sed adipiscing diam. Sed cras ornare arcu dui vivamus. Fringilla phasellus faucibus scelerisque eleifend.</p>
</div>

<div class="container">
  <img src="https://source.unsplash.com/random/200x200?v=1">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed risus ultricies tristique nulla aliquet enim. Sed pulvinar proin gravida hendrerit lectus a. Consectetur a erat nam at lectus urna duis convallis convallis. Egestas integer eget aliquet nibh praesent tristique magna. Molestie a iaculis at erat pellentesque adipiscing. Tincidunt arcu non sodales neque sodales ut etiam. Lobortis mattis aliquam faucibus purus in. Suspendisse ultrices gravida dictum fusce ut placerat orci. Enim ut tellus elementum sagittis vitae et leo duis ut. Adipiscing elit ut aliquam purus sit amet luctus. Sit amet dictum sit amet justo donec. Elementum eu facilisis sed odio. Vitae suscipit tellus mauris a diam maecenas. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Condimentum mattis pellentesque id nibh tortor id. Odio morbi quis commodo odio aenean sed adipiscing diam. Sed cras ornare arcu dui vivamus. Fringilla phasellus faucibus scelerisque eleifend.</p>
</div>

Answer 2

By defining a fixed width for the image, you can achieve varying heights with this combination of HTML and CSS. This setup also allows for scrollable text alongside the images:

* {
  margin: 0;
  padding: 0;
}

:root {
  --image-width: 200px;
}

.container {
  position: relative;
  margin: 20px auto;
  max-width: 600px;
}

img {
  width: var(--image-width);
}

p {
  overflow-x: auto;
  position: absolute;
  top: 0;
  left: calc(var(--image-width) + 10px);
  bottom: 0;
  right: 0;
}

<div class="container">
  <img src="https://source.unsplash.com/random/200x200">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed risus ultricies tristique nulla aliquet enim. Sed pulvinar proin gravida hendrerit lectus a. Consectetur a erat nam at lectus urna duis convallis convallis. Egestas integer eget aliquet nibh praesent tristique magna. Molestie a iaculis at erat pellentesque adipiscing. Tincidunt arcu non sodales neque sodales ut etiam. Lobortis mattis aliquam faucibus purus in. Suspendisse ultrices gravida dictum fusce ut placerat orci. Enim ut tellus elementum sagittis vitae et leo duis ut. Adipiscing elit ut aliquam purus sit amet luctus. Sit amet dictum sit amet justo donec. Elementum eu facilisis sed odio. Vitae suscipit tellus mauris a diam maecenas. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Condimentum mattis pellentesque id nibh tortor id. Odio morbi quis commodo odio aenean sed adipiscing diam. Sed cras ornare arcu dui vivamus. Fringilla phasellus faucibus scelerisque eleifend.</p>
</div>

<div class="container">
  <img src="https://source.unsplash.com/random/200x100">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed risus ultricies tristique nulla aliquet enim. Sed pulvinar proin gravida hendrerit lectus a. Consectetur a erat nam at lectus urna duis convallis convallis. Egestas integer eget aliquet nibh praesent tristique magna. Molestie a iaculis at erat pellentesque adipiscing. Tincidunt arcu non sodales neque sodales ut etiam. Lobortis mattis aliquam faucibus purus in. Suspendisse ultrices gravida dictum fusce ut placerat orci. Enim ut tellus elementum sagittis vitae et leo duis ut. Adipiscing elit ut aliquam purus sit amet luctus. Sit amet dictum sit amet justo donec. Elementum eu facilisis sed odio. Vitae suscipit tellus mauris a diam maecenas. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Condimentum mattis pellentesque id nibh tortor id. Odio morbi quis commodo odio aenean sed adipiscing diam. Sed cras ornare arcu dui vivamus. Fringilla phasellus faucibus scelerisque eleifend.</p>
</div>

<div class="container">
  <img src="https://source.unsplash.com/random/200x400">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed risus ultricies tristique nulla aliquet enim. Sed pulvinar proin gravida hendrerit lectus a. Consectetur a erat nam at lectus urna duis convallis convallis. Egestas integer eget aliquet nibh praesent tristique magna. Molestie a iaculis at erat pellentesque adipiscing. Tincidunt arcu non sodales neque sodales ut etiam. Lobortis mattis aliquam faucibus purus in. Suspendisse ultrices gravida dictum fusce ut placerat orci. Enim ut tellus elementum sagittis vitae et leo duis ut. Adipiscing elit ut aliquam purus sit amet luctus. Sit amet dictum sit amet justo donec. Elementum eu facilisis sed odio. Vitae suscipit tellus mauris a diam maecenas. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Condimentum mattis pellentesque id nibh tortor id. Odio morbi quis commodo odio aenean sed adipiscing diam. Sed cras ornare arcu dui vivamus. Fringilla phasellus faucibus scelerisque eleifend.</p>
</div>

<div class="container">
  <img src="https://source.unsplash.com/random/200x200?v=1">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed risus ultricies tristique nulla aliquet enim. Sed pulvinar proin gravida hendrerit lectus a. Consectetur a erat nam at lectus urna duis convallis convallis. Egestas integer eget aliquet nibh praesent tristique magna. Molestie a iaculis at erat pellentesque adipiscing. Tincidunt arcu non sodales neque sodales ut etiam. Lobortis mattis aliquam faucibus purus in. Suspendisse ultrices gravida dictum fusce ut placerat orci. Enim ut tellus elementum sagittis vitae et leo duis ut. Adipiscing elit ut aliquam purus sit amet luctus. Sit amet dictum sit amet justo donec. Elementum eu facilisis sed odio. Vitae suscipit tellus mauris a diam maecenas. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Condimentum mattis pellentesque id nibh tortor id. Odio morbi quis commodo odio aenean sed adipiscing diam. Sed cras ornare arcu dui vivamus. Fringilla phasellus faucibus scelerisque eleifend.</p>
</div>

Answer 3

Answer №2

Here is a jQuery example demonstrating how to utilize this:

$(document).ready( function(){
$("#anotherdiv").css("width", $("#image").width());

});

Answer 4

Here is a jQuery example demonstrating how to utilize this:

$(document).ready( function(){
$("#anotherdiv").css("width", $("#image").width());

});

Answer 5

Answer №3

To apply the same style to two elements, assign them a common class name, like this

<div class = "samestyle"></div>
<div class = "samestyle"></div>

In CSS, you can then define the style for the common class as follows

.samestyle {
    /* Your styles here */
}

Answer 6

To apply the same style to two elements, assign them a common class name, like this

<div class = "samestyle"></div>
<div class = "samestyle"></div>

In CSS, you can then define the style for the common class as follows

.samestyle {
    /* Your styles here */
}

Restrict the height of a division based on the adjacent division

Answer №1

Answer №2

Answer №3

Similar questions

Adjusting the size of images in a Bootstrap lightbox gallery

Focusing solely on a particular category in EJS

The modal box should adjust its height to perfectly accommodate the content within

Halt the Bootstrap carousel while entering text in a textarea

Using z-index to overlay a background image with transparency

Adjust the translateZ value according to the dynamic height of the element

PHP do-while loop triggers out of memory error while running SQL query code

Tips for achieving horizontal alignment of headers

Excessive form inputs extend beyond the modal when utilizing Bootstrap 3

Mobile page sliding mechanism

Issues with Angular.js controller functionality

Display a popup notification when clicking in Angular 2

Align the prices of products in a uniform position within each table cell

What orientation is best for the back arrow to take in a website written in Arabic?

Load CSS styles once the HTML content has been generated by the PHP script

How can we prevent the navigation from fading out when scrolling back up, as JQuery control the opacity of the Nav to fade in?

Why isn't a single click enough to activate an anchor generated with the Sidr jQuery library in Rails?

Is there a way to retrieve a value from localStorage and use it to automatically set the selected option in a UL-based dropdown list upon page load

The jQuery function is not functioning correctly

Completing a third-party htaccess file