Adjusting text to fit alongside an undefined image's width

Let's keep this straightforward. I've got an image that uses the following CSS properties: .img-right { float: right; margin: 0px 0px 10px 20px; }

Below the image, there's a caption with these CSS styles: .img-right p { margin-top: 5px; padding-top: 5px; font-size: 11px; color: #858d93; }

I'm looking to have the width of the paragraph adjust based on the size of the image being used. Since images with that class vary in width, it seems using jQuery is the only option to achieve this. Can anyone help me make this work?

Thank you and Happy Holidays!

jquerycssimagehtmlwidth

Answer №1

Let's try creating a simple HTML structure like this:

<div class="image-container">
  <img src="example.jpg" />
  <div class="description">This is my description</div>
</div>

For styling in CSS:

.image-container { width: auto; min-width: 100px; float: right; margin: 0 20px 10px 0; }
.image-container img { min-width: 100px; }
.image-container .description { width: auto; min-width: 100px; margin-top: 5px; padding-top: 5px; font-size: 11px; color: #858d93; }

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 integration of CSS into Laravel was unsuccessful

Below is the content of my index file located in views.admin: <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet&qu ...

csslaravel

Ways to conceal a div element when the JSON data does not contain a value

If the value in "desc" is empty, then hide <div24> and <popup-desc>. html <div class="popup"> <div class="popup-top" style="background-color: '+e.features[0].properties.fill+';"> ...

javascripthtmlcssjson

What is the best way to keep an image fixed at the top while scrolling, but have it disappear when the page reaches the footer?

I am in need of creating a unique Bootstrap 4 layout that involves an image staying fixed to the top after scrolling down until it reaches the bottom of the header. When the page is further scrolled down and the footer comes into view, the image should sta ...

jquerycsstwitter-bootstrap

Leveraging PHP variables to determine the image location, implement an onclick function to cycle through the image gallery

I am facing an issue with a database query that is supposed to display multiple images. These images are stored in a PHP variable and shown one at a time using a JavaScript gallery with an onclick function to navigate through them. Unfortunately, the funct ...

javascriptphpimage

Adjusting a PHP variable based on the specific link that was clicked

I have implemented a loop to display a page with a list of users: foreach ($mytaxonomies as $mytaxonomy) : setup_postdata($mytaxonomy); echo $mytaxonomy->name; // display the user's name echo '<a>Send email</a>'; endfore ...

phpjquery

Selenium: To find an element using XPath for a radio button, you cannot use the contains() method with the @id attribute

I'm working on a list of radio buttons with color labels. Currently, I am able to select the radio button labeled Red, which is the third option: driver.find_element_by_xpath("//tr[@id='600,-2147649943:1107:Red||_tr']//input[@name='doc ...

pythonhtmlseleniumgoogle-chromexpath

Storing ajax data into a variable seems to be a challenge for me

I am facing an issue with my ajax call where I am receiving the data correctly, but I am unable to assign it to a local variable named item_price. The data that I am receiving can either be 100.00 or 115.25. Below is the snippet of my ajax code: $.ajax({ ...

javascriptajaxjquery

What is the best way to loop through <div> elements that have various class names using Python 3.7 and the Selenium webdriver?

I am currently in the process of creating a Reddit bot that provides me with a detailed report about my profile. One task I need to accomplish is identifying which of my comments has received the most likes. Each comment on Reddit is wrapped in elements w ...

htmlseleniumpython-3.7

Transforming video files into HTML5 ogg/ogv and mpg4 formats

Is there a reliable software out there that can effectively convert video files (such as avi, flv, etc.) to HTML5 supported ogg/ogv and mpeg4 formats? I have tested a few options but unfortunately none of them seem to get the job done correctly. ...

videohtmlmpeg

Enable highlighting a table border when hovering over it

Is there a way to highlight the boundary of a table row when hovering over it? Something like this: https://i.sstatic.net/PbQSR.png I attempted to use CSS with the following code: .ant-table-tbody>tr.ant-table-row:hover>td, .ant-table-tbody>tr&g ...

cssreactjsbootstrap-4material-ui

What is the Javascript alternative to this jQuery code?

Currently, I am working on a project where the use of jQuery is prohibited. Therefore, I am in search of plain Javascript code that serves as an equivalent to the following jQuery script: $('img[alt="Apple Store Logo"]').parent().removeAttr("tar ...

javascriptjquery

Problems with select tag change events

I encountered an issue with select tag onChange events. When I select a value from the select tag, it should display in a textbox that is declared in the script. It works perfectly when I remove the class "input" from the select tag, but I prefer not to re ...

javascriptjqueryhtmlcss

Step-by-step guide for dynamically including dropdown options

Is there a way to dynamically add a dropdown using JavaScript? I currently have a dropdown with numbers that creates another dropdown when selected. However, I want to add the dynamic dropdown through JavaScript. How can I achieve this? Below is the PHP ...

phpjavascripthtml

A layout with two columns, one of which has a minimum width

Can a two-column layout be created where one column has a minimum width value? Take a look at the following code: #container { width: 100%; max-width: 1200px; min-width: 960px; height: 600px; margin: 0 auto; } #sidebar { float: left; ...

htmlcss

Successful jQuery Ajax request made without the need for JSON parsing

I find it strange that my experience with jQuery's ajax function is completely different from what I'm used to. Below is the javascript code in question: $.ajax({ url: "/myService.svc/DoAction", type: "GET", dataType: "json", su ...

javascriptjqueryajaxjson

Is there a way to load an image asynchronously when the page loads and show a loading gif during the loading process?

My image tag displays a dynamically generated graph from the database. The loading time can vary significantly, sometimes only taking a second while other times it may take up to 6 or 7 seconds for the graph image to appear. I am looking for a way to sho ...

javascriptjqueryajaxasp.net-mvc

Error: Json Value missing when attempting to convert datatable to json structure

I am trying to retrieve data from a database and assign it to a dropdown list using jQuery. Here is the jQuery code I am using in the onclick event: function getCountry() { try { $.ajax({ type: "POS ...

asp.netjqueryweb-services

Executing a JQuery function to trigger an action on a controller without performing a redirection afterwards

I have created a JQuery confirmation popup that includes Yes and No buttons. When the Yes button is clicked, it triggers the following function: function performTask() { $("#confirmPopup").dialog("close"); var someKey = $("#som ...

jqueryasp.net-mvc

What is the most effective method for choosing elements in jQuery?

Is there a way to efficiently target images with the data-original attribute but without the src attribute? I currently use: $('img[data-original]:not(img[src])');, but I believe there might be a faster alternative. What is the most efficient m ...

jquery

Two elements failing to display side by side

Can someone help me figure out how to align the quantity and Add-to-cart button on the same line? The quantity is displaying as a block element even though I set it as inline... any suggestions would be appreciated! Visit this link for reference. I' ...

csswordpresswoocommerce