CSS: Caption text below image remains on same line

I am struggling with positioning a div that contains an image and a caption. My goal is to make the caption break into a new line when it reaches 95% of the width of the image.

Despite my efforts, I can't seem to achieve this. The text always pushes the image to the left without breaking as intended.

For reference, here is the fiddle I created for this issue: http://jsfiddle.net/hw7t7xyn/1/

The image is positioned with:


right: 0;
top: 10px;

However, due to the length of the text, it shifts to the left.

Additionally, the div.caption does not seem to inherit the width of its parent div.

If anyone has any insights or solutions, I would greatly appreciate the help. This issue has become quite frustrating for me.

Update: I forgot to mention that I do not know the exact dimensions of the image. Is there a way to resolve this without needing to use JavaScript?

htmlcss

Answer №1

To fix the alignment issue, try adding a specific width to the main div that is absolutely positioned.

In my case, I set the width to 260px to match the image size.

Once this was done, the div aligned correctly to the far right, considering the right:0px setting you have. Is this what you intended?

Here is the link to view the changes made.

Answer №2

section.image-container {
    overflow: hidden;
    position: absolute;
    text-align: left;
    width:260px;
}

img.main-image {
    position: relative;
    display: block;
}

div.description {
    margin-top: 7px;
    width: 95%;
    position: relative;
    display: inline-block;
}

Set the width for image-container element

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

Modifying paragraph content with JavaScript based on selected radio button values and troubleshooting the onclick event not triggering

I am working on implementing a language selection feature on my website where users can choose between English and Spanish. The idea is to have two radio buttons, one for each language, and a button. When the button is clicked, the text of the paragraphs s ...

javascripthtmlbuttononclick

How can you dynamically disable the submit button on a form in Angular 7+ based on the form's current status?

Let's consider a scenario with a button in our code: <button type="button" class="menu-button" [disabled]="isInvalidForm()">Save</button isInvalidForm() { console.log('I am running!'); return this.nameValidator.errors || this.last ...

htmlangularfrontendweb-frontend

Tips for effortlessly enlarging an element

When you click on "#sidebarnav>li", the following happens: 1) The second child of it - <ul> element will expand and its class toggles between "collapse" and "collapse in". 2) "#sidebarnav>li" will receive the "active" class. 3) The "aria-ex ...

javascriptjquerycss

Store additional data with the visitor ID WEB in Fingerprint JS V3

After browsing through similar questions, I couldn't find a solution that fits my needs. Basically, I have a website where a random emoji is generated and stored in local storage. However, this method is not effective as users can easily delete their ...

javascripthtmlfingerprint

Interact with the :before pseudo element when hovering over an element

Is there a way to manipulate the :before pseudo element when hovering over the main element? My goal is for the pseudo element to change its height when I hover over the main element. This is how my code looks: HTML <div class="object">& ...

htmlcsspseudo-element

Embrace the power of React using curly brackets!

Today, I made the decision to dive into learning React. Typically, I use Brackets for my coding environment. The first step I took was adding the necessary sources to my HTML code. <html> <head> <link rel="stylesheet" href="styl ...

htmlreactjs

What is the best way to adjust the maximum width of Reddit's embedded comment iframe?

Reddit provides a code that can be embedded to display their comments on a website, As an example: <div class="reddit-embed" data-embed-media="www.redditmedia.com" data-embed-parent="false" data-embed-live="false" data-embed-uuid="24a3e666-f855-4664 ...

javascripthtmlcssiframereddit

"Exploring Angular: A guide to scrolling to the bottom of a page with

I am trying to implement a scroll function that goes all the way to the bottom of a specific section within a div. I have attempted using scrollIntoView, but it only scrolls halfway down the page instead of to the designated section. .ts file @ViewChild(" ...

javascripthtmlangulartypescript

A unique flex layout with scrolling capabilities specifically designed for optimal performance in Chrome

This layout includes a header, footer, sidebar, and a scrolling main content section. You can view a demonstration of this design on Bootply. <div class="parent"> <div>HEADER</div> <div class="main"> <div class="side"> ...

htmltwitter-bootstrapcssflexbox

What is the best way to incorporate external HTML content while ensuring HTML5 compatibility? Exploring the different approaches of using PHP, HTML

While this may seem like a simple task to the experts out there, I have been struggling for over an hour without success... My objective is to use a single footer file and menu file for all my webpages while considering blocking, speed, and other factors. ...

phpjavascriptperformancehtml

The process of retrieving CSS attributes from a control found by XPath using Selenium IDE

During my Selenium IDE script execution, I am looking to identify and handle an error state. This specific error state is visually highlighted on the page with a select control changing its background color to a light shade of red. The xpath for the selec ...

cssxpathselenium-ide

React not displaying wrapped div

I am facing an issue with my render() function where the outer div is not rendering, but the inner ReactComponent is displaying. Here is a snippet of my code: return( <div style={{background: "black"}}> <[ReactComponent]> ...

javascripthtmlcssreactjsreact-native

Utilizing a dynamic URL to set the background image of a div element (with the help of

Currently, I am in the process of designing a user registration page that allows users to input an image URL and view a preview of the image within a designated div. The div already contains a default image set by a specific class. The HTML code for displa ...

jqueryhtmlcssimage

Execute the script when the document is fully loaded

Is there a way to show a dialog in jQuery when the document loads without using <body onload="showdialog();">? Can the javascript code be placed in the main div or footer div to work like the onload event? <body onload="$('#dialog').sli ...

javascripthtml

Creating a dynamic pulse effect using jQuery to manipulate CSS box-shadow

My goal is to create a pulsating effect using CSS box-shadow through jQuery. Despite my best efforts, the code I attempted failed to produce the desired smooth pulse effect with box-shadow. The code snippet I experimented with: <div class="one"> &l ...

javascriptjqueryhtmlcss

Deselect the checkbox if you are checking a different checkbox

Struggling with my code, it's hit or miss. Feeling defeated. Seeking assistance to uncheck a checkbox when another checkbox is checked. Check out the code below: JavaScript: $("#1 #checkAll").change(function() { if ($("#1 #checkAll").is(' ...

javascriptjqueryhtmlcheckbox

Troubleshooting image resolution issues in ASP web application (using C#)

I've been working on developing an asp web application that requires users to register details of a person, including uploading an image. The file name of the details/image are stored in a SQL database with the image filename saved in an NVARCHAR colu ...

c#asp.nethtmlimage

It appears that the query parameters are impacting the speed at which the page loads

I am currently developing a project on this platform. It is using c9.io, an innovative browser-based collaborative programming IDE. The index.php file includes the following script: <?php $path = ltrim($_SERVER['REQUEST_URI'], '/&ap ...

javascriptphphtmlcss

What could be the reason for justify-self: flex-start not positioning the div at the bottom of a column?

I want to display a div in three levels: header, content, and footer. The content can vary in height and the footer should always be at the bottom. Here is how I have implemented it: <div class="news-content-block"> <div class=" ...

htmlcssflexbox

Creating a Piechart in Kendo UI that is bound to hierarchal remote data

I am facing an issue with binding remote data to a pie chart while managing a grid with dropdown sorting options. The grid is working fine, but I am unable to display the hierarchical data on the pie chart as categories. <!DOCTYPE html> <html> ...

javascripthtmlkendo-uipie-chart