Setting the parent's height to match one of its children

I'm struggling to align the height of the pink '#images-wrap' with the main image. When there are too many small rollover images on the right, it causes the pink div to extend beyond the main image's height. If I could make them match in height, I could then use overflow hidden to hide the extra rollover images below and enable scrolling for viewing them.

Using a table layout doesn't solve the issue. Although using child div elements with hidden overflow seems like it should work, setting the height causes problems with image aspect ratios. The 3:2 aspect ratio of the images must be maintained.

The attempted javascript solutions fail to retrieve the image heights. Even fetching the child image height proved unsuccessful.

If anyone knows a magic trick to accomplish this, your advice would be greatly appreciated!

javascripthtmlcss

Answer №1

To implement a flexible layout, apply the display: flex property to the main container:

#content-wrap {
  width: 100%;
  height: auto;
  margin-top: 25px;
  float: left;
  display: flex;
}

#info-wrap {
  width: 100%;
  height: 325px;
  float: left;
  text-align: right;
  position: relative;
}

#main-content {
  width: 80.5%;
  float: left;
  background-size: cover !important;
  background-position: center center !important;
  height: auto;
}

#main-content>img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

#thumbnails {
  width: 17.5%;
  height: auto;
  float: left;
  margin-left: 2%;
  overflow-y: scroll !important;
}

.thumbnail {
  margin-bottom: 6px;
  background-position: center;
  background-size: cover;
  height: auto;
}

.thumbnail:last-of-type {
  margin-bottom: 0;
}

.thumbnail>img {
  height: auto;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content-wrap">
  <div id="main-content" style="background-image: url('http://example.com/image.jpg')">
    <img src="http://example.com/thumbnail.jpg" id="image-sizer">
  </div>
  <div id="thumbnails">
    <div class="thumbnail" onmouseover="$('#main-content').css('background-image', $(this).css('background-image'));" style="background-image: url('http://example.com/thumbnail1.jpg')">
      <img src="http://example.com/thumbnail.jpg">
    </div>
    <div class="thumbnail" onmouseover="$('#main-content').css('background-image', $(this).css('background-image'));" style="background-image: url('http://example.com/thumbnail2.jpg')">
      <img src="http://example.com/thumbnail.jpg">
    </div>
    <script>
      // adjust overflow if less than 5 thumbnails
      var thumbs = document.getElementsByClassName('thumbnail');
      var thumbsContainer = document.getElementById('thumbnails');
      if (thumbs.length < 5) {
        thumbsContainer.style.overflow = 'hidden';
      }
    </script>
    <script>
      // ensure '#thumbnails' height does not exceed '#main-content'
      var mainContentHeight = document.getElementById('image-sizer').style.height;
      var thumbnailContainerHeight = document.getElementById('thumbnails').style.height;
      if (thumbnailContainerHeight > mainContentHeight) {
        document.getElementById('thumbnails').style.height = mainContentHeight;
      }
    </script>
  </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

Ways to create space around Navbar MUI for a more balanced design

Currently, I am working on designing a navigation bar using MUI. My goal is to create a navbar with some space on both sides similar to the one seen on If you take a look at Stackoverflow's navbar, you will notice that it also has space on either sid ...

javascriptreactjsmaterial-uinavbar

Replace the image source with a list of images

I am looking to create a dynamic image list using either an array or an HTML list. When I hover over an image, it should change one by one with a fade or slide effect, and revert back to the default images when I hover out. Question 1: What type of list s ...

javascriptjqueryhtmlcssimage

Understanding Arrays in Angular JSIn this article, we

I am new to working with Angular JS. Currently, I am populating an array and attempting to showcase its contents on the HTML page using ng-repeat. $scope.groupedMedia = []; // Elements are being added through a for loop. $scope.groupedMedia[year].push(r ...

javascripthtmlarraysangularjs

Display a list next to a block of text and image using HTML and CSS styling

I am having trouble with keeping a navigation list aligned inline with a block of text that includes an image. My issue arises when I expand the browser to full screen size, causing the list to overlap the text block. Here is the HTML code snippet: <bo ...

htmlcss

What is the best way to toggle the visibility of a side navigation panel using AngularJS?

For my project, I utilized ng-include to insert HTML content. Within the included HTML, there is a side navigation panel that I only want to display in one specific HTML file and not in another. How can I achieve this? This is what I included: <div ng ...

javascriptjqueryhtmlangularjs

Unable to retrieve the child value using getJSON

I am currently retrieving data from an API that provides information in a specific format. Here is an example of the JSON data I receive: { "total":1, "launches":[ { "name":"Falcon 9 Full Thrust | BulgariaSat-1", "net":"June 23, 2017 1 ...

javascriptjqueryhtmlarraysjson

Next.js API Endpoint Call Resulting in Empty Object Returned by Fetch Function

Having an issue with making an API call in Next.js to delete an item from the database. I'm using the "body" field of the fetch to send a string to the API. The fetch call is within a Next.JS page, and the API endpoint is located in the API folder gen ...

javascriptnode.jsreactjsnext.jsfetch-api

Having issues with my AngularJS application not updating as expected

After creating a custom service to store all search parameters, I can easily access them from any part of my code. This ensures that the search parameters are always accurate. Below is the definition of the custom service: App.factory('filterService& ...

javascriptangularjs

I am getting a HTTP 405 error indicating that the method is not allowed, and it appears to

In my Javascript program, I requested this URL using the library epson-2.6.0.js, which is the Epson SDK for JavaScript specifically designed for thermal printers. My target device is a TM U220 connected via ethernet. GET XHR http://192.168.199.15:8008/soc ...

javascriptajaxprintingcors

Troubleshooting: Issue with AngularJS Image onload directive - "this" reference not functioning properly?

I have a custom directive that looks like this: .directive('ngImageOnLoad', function () { return { restrict: 'A', link: function(scope, element, attrs) { element.bind('load', function() { ...

javascriptangularjsangularjs-directive

Looping through the json resulted in receiving a null value

When working with typescript/javascript, I encountered an issue while trying to fetch the 'statute' from a data object: {_id: "31ad2", x: 21.29, y: -157.81, law: "290-11",....} I attempted to assign data.law to a variable, but received a typeer ...

javascripttypescript

Develop a personalized mapping API with a unique image integration for website navigation

Currently, I am in the process of developing a website for my university that will allow users to easily locate all available free food options on campus. My goal is to create a platform where food providers can register their events, have them saved in a ...

phpjavascripthtml

Assistance in configuring Zurb Foundation 5 for optimal integration with Laravel

As a relatively new user to Laravel with previous experience using older versions of Foundation, I am currently in the process of setting up a new Laravel project. My goal is to integrate the Foundation framework into my project, but I find myself a bit co ...

javascriptphphtmlcsslaravel

Styling for jQuery mobile panels disappears when used on multiple pages

Currently, I am working on developing a mobile application for PhoneGap using jQuery Mobile. The app consists of multiple pages within the same HTML document. I have configured it so that all pages share the same panel, but I am facing an issue with the st ...

jqueryhtmljquery-mobilecordova

Unable to modify page property status through the Notion API

I've been attempting to use the Notion JS-sdk to update a page's status using their API. However, I've run into some issues that I can't seem to resolve. Updating the status requires modifying the properties object, but no matter what ...

javascriptnode.jsnotion-api

Implementing React and Material UI - Customizing Navigation Buttons/Links according to Routes

The following code snippet represents the main entry point of a React app, app.js, which includes the router endpoints. Below the app.js code, you will find the code for a Nav component, which serves as the navigation menu. I am looking to structure this ...

javascriptreactjsmaterial-ui

Utilizing the keyword 'this' within a function of a JavaScript class that is invoked with the .map method

I am working with the RegisterUser class which contains various methods and properties: class RegisterUser { constructor(username, password, ispublic){ this.username = username; this.password = password; this.ispublic = ispublic; this.id ...

javascriptecmascript-6

What is the method for displaying script commands within package.json files?

With a multitude of repositories, each one unique in its setup, I find myself constantly referencing the package.json file to double-check the scripts. "scripts": { "start": "npm run dev" "build:dev": "N ...

javascriptnode.jstypescriptnpm

Having trouble getting my image to appear at the top of the website, could it be an alignment issue?

Here is a screenshot showing the issue: https://i.stack.imgur.com/kSVQj.png. The quote on my website does not align to the top as expected. Can anyone provide a solution for this? Below is the corresponding code: <body> <div id="container"> ...

htmlcss

Error thrown by loader.js at line 582 of internal/modules/cjs/loader.js

Encountered this error message in the console: Error : Cannot find module. The detailed error is provided below. Any suggestions on how to resolve this? internal/modules/cjs/loader.js:582 throw err; ^ Error: Cannot find module 'C:\Users ...

javascriptnode.jsnpm