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

Is there a way to access the variable value chosen from a select dropdown inside a function and then assign it to a JavaScript variable outside of the function?

Responsive Design and Advertising with CSS Media Queries

Disable the ability to select text when double-clicking

"Hidden panels in Sencha Touch only respond to show() and hide() methods after a resize event

Tips for ensuring that the <input type="file"> element only allows the selection of .pdf files

Use a for loop to iterate through elements and retrieve input values using getElementById()

What is the best approach in Ruby for managing an unordered list with split columns and counting each

Error in React regarding the tri-state checkbox's indeterminate state being null

Error message: When the mouse hovers over, display the chart(.js) results in TypeError: t is

In Firefox, the HTML label fails to activate the corresponding input field when the mouse is moved while clicking

Hide an Angular button when a page is loaded, depending on the information found in a table

Preventing Form Submission from Redirecting to the Top in an HTML Document with PHP

What is the best way to customize the background color of a highlighted ToggleButton in react-bootstrap?

Is it necessary to install only form control styles from Bootstrap 4?

A new module is unable to load Angular Material

The implementation of a secondary sidebar for internal pages

Update the content of a div element with the data retrieved through an Ajax response

iPhone - touchstart event not functioning in JavaScript

Clicking on the overlay does not close the bootstrap collapsed toggle

jQuery fails to apply a class if the input fields are not empty