Determining the minimum height of CSS based on an image

Currently, my goal is to dynamically set the minimum height of my CSS tabled content based on the height of the image rather than the text.

In simple terms, my layout structure looks like this:

<Image @60% width> | <Text @40% width>

I am utilizing flex boxes to accomplish this.

However, the issue arises when resizing the page (static heights are not an option as it needs to be fully responsive), as the image shrinks drastically and the text expands beyond control.

My ideal scenario would be for the text to always match the height of the image, with scroll options available in case of overflow.

Please see my current Jsfiddle here: http://jsfiddle.net/D7h3z/4/

I am open to exploring new or experimental technologies. However, I prefer not to use JavaScript unless absolutely necessary. Additionally, I do not utilize JQuery, so please refrain from suggesting that in your responses if possible.

htmlcssflexbox

Answer №1

Take a look at the modifications I've implemented in your code snippet -- Updated Fiddle

Mainly, I utilized absolute positioning for the inner span of the description and added an overflow-y:auto property to its container span. Additionally, I specified a minimum height of 200px for the image container, which seems to be addressing the issue you mentioned. Feel free to let me know if there are any further adjustments needed.

.description {
    width: 40%;
    padding: 10px;
    position: relative;
    overflow-y:scroll;
}

.imagebox {
    width: 60%;
    min-width: 300px;
}

.imagebox img {
    width: 100%;
    min-height:200px
}

.description span {
    padding: 10px;
    position: absolute;
}

UPDATE However, it appears that the aspect ratio of the image is still not maintained... sigh

UPDATE 2 I have introduced a min-width property that somewhat resolves this issue, but from a dynamic perspective, this solution is less than ideal. I will revisit it later tonight for further refinements.

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

Changing the div background color based on the status of the `.play()` function

I need assistance with changing the background color of a div based on whether an audio file is playing or not. $('.uprow2').on('click', function() { $('#karma')[0].play(); }); .uprow2 { width: 680px; height: 60px; ...

javascriptjqueryhtmlcss

Reasons why I am unable to extract a data from a website using Selenium

I am trying to extract the data labeled as "value" within the following HTML structure https://i.sstatic.net/E9hVs.png https://i.sstatic.net/VbXr6.png Despite trying various methods such as driver.find_element_by_id('date') , I quickly realize ...

pythonhtmlselenium

CSS: The calc() function does not take into account the bottom padding when used in Firefox and Internet

I am encountering an issue with the calc() function in Firefox 32 and IE 11, where the bottom padding of a div is not being respected. However, this problem does not occur in Chrome and Opera. The main content section should have a fixed height while allo ...

htmlcss

The div is identified by an ID and a class, but the class is not being utilized by the div

Can someone please explain why the font size, background color, and font weight are not applying to the content in the "welcome" class in this simple HTML/CSS code below? The DIV has both an ID and a class, yet the styles are not being reflected. Any insi ...

htmlcss

The sidebar's background is cut off before reaching the bottom when scrolling

I have been working on creating a sidebar that includes a background image with a transparent overlay. However, I encountered an issue where the overlay background does not stretch all the way to the bottom when the scroll bar becomes visible. Despite sett ...

htmlcss

Online platform generating printed code

Have you checked out the website here? I'm facing a problem on that site and can't figure out why. I've installed PDO, PHP, httpd, php-mysql, but still unable to resolve the issue. I've even tried reinstalling everything and following ...

phphtmlmysqlapachepdo

Using jQuery: What is the best way to implement form validation in jQuery before submitting?

I've created a Bootstrap form as shown below: <form id="loginForm" method="post" action="" role="form" class="ajax"> <div class="form-group"> <label for="userName"></label> <input type="text" class="form-co ...

javascriptjqueryformstwitter-bootstrapcss

Exploring ways to traverse through Map values

My app initially displays a grid of cells that I would like to fill in with data. Here is the initial view: https://i.sstatic.net/AgI16.png -> As the app runs, each rider's score will be updated dynamically like this: https://i.sstatic.net/HOPoN ...

htmlangulartypescriptobject

<header data-profile="http://gmpg.org/xfn/11">can anyone explain this to me?

I received this code snippet from a WordPress site. <head profile="http://gmpg.org/xfn/11"> Can someone explain what this code does? What is the purpose of including this code? :-) ...

phphtmlwordpress

Tips for showcasing information from an external model on your webpage without the need to reload the entire page

My goal is to dynamically show a User's name above a form field where they input their Employee # without requiring a page refresh. For instance, when they enter their # and move to the next field, I want their name to appear above based on the datab ...

pythonjqueryhtmldjangoajax

Enhanced Bootstrap 4 button featuring custom design with text and image aligned on the right side, optimized for flexbox layout

I am looking to design a button-like div that features a flag image alongside the abbreviation of a country. Although I have some code in mind, it doesn't follow Bootstrap's guidelines and I am struggling to adapt it accordingly. <div cla ...

htmltwitter-bootstrapbuttonbootstrap-4

Attempting to implement an EventListener to alter the navbar upon scrolling, unsuccessful at the moment

Exploring ways to update the navigation bar upon scrolling to shrink its size and modify the color scheme (specifically, transitioning from a transparent background to white and altering font colors). Below is the HTML snippet: /* Defining the overa ...

javascripthtmlcss

Does the flex-grow property depend on the flex-basis in flexbox?

Check out this snippet of HTML code <div class="container"> <div class="box box1">one ...

htmlcssflexbox

Creating an Image Link within Nivo Slider

I have been trying to figure out how to make an image a link in NivoSlider. I know that I can use captions to create a link, but I want the actual image to be clickable for better accessibility. I found a similar question on StackOverflow, but it was rela ...

javascriptjqueryhtmlcssnivo-slider

Closing a Bootstrap 4 accordion that is dynamically generated within a table when another accordion is opened

Currently, I am utilizing bootstrap-4 to create accordions within a table. Whenever clicking on the image, another tr element is appended which triggers the opening of the accordion. Furthermore, within each accordion, I am adding another tr element, essen ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

What is the method for initiating a radial gradient from the middle of the pie chart?

In my pie chart with grid lines, I have successfully implemented a radial gradient. However, the issue is that there is a separate gradient for each pie slice. What I really want is a single gradient originating from the center of the entire pie chart. I ...

javascriptcssd3.js

Attempting to address the issue of aligning items within a flexible div container

I seem to be encountering a recurring issue in my code. Here is an example: <div className="flex flex-col w-full mb-3"> <div className="flex flex-row w-full"> { Vege && <p className="mr-1 ...

htmlcssreactjstailwind-css

React component for a background image with a gradient overlay

I'm facing an issue trying to incorporate a background image for a div along with a color overlay. In plain CSS, the code would typically look like this: .backgroundImage { background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rg ...

cssreactjsionic-framework

What are the methods for storing scripts and images from my website?

Question on Website Speed I've been working on building a website hosted on x10hosting and have been researching ways to make it faster. I came across a page that suggested improving JQuery codes could help with site speed. The page mentioned that in ...

phpjqueryhtmlcachingbrowser-cache

Modifying the small-dialog identifier in the Magnificent Popup

I recently encountered an issue while trying to change the ID name of the small-dialog in the Magnificent Popup JQuery Plugin. After making the necessary CSS adjustments to accommodate this change, the dialog box stopped functioning properly. I am now seek ...

jqueryhtmlcssmagnific-popup