Limit the width of the div to match the width of its only child element

Question

Limit the width of the div to match the width of its only child element

My goal is to incorporate image captions on my website, but I've run into an issue with compatibility. Since the figure tag isn't supported in old versions of IE such as IE8 or below, I'm considering using a <div> containing an <img> along with the caption.

The problem arises when the caption text is wider than the image itself. In this case, the width of the enclosing <div> adjusts to match the width of the caption, creating unsightly white space next to the <img>. Ideally, I'd like the caption to wrap over multiple lines instead.

I could manually set the width of the <div> to be equal to the image's width, or add <br /> tags within the caption to force line breaks. However, I'm searching for a more elegant and efficient solution to this problem.

To better illustrate the issue, you can view an example on this jsfiddle link.

css image html width caption

Answer 1

Answer №1

View the Demo: http://example.com/demo/1/

CSS Styles:

.image-container {
    display:table;
    width:1px;
    float:right;
    border:1px solid #aaa;
    border-radius:5px;
    overflow:hidden;
    margin:10px;
}
.image-container img {
}
.image-container span {
   margin:10px;
}

HTML Code:

<body>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
    <div class="wrapper">
        <div class='image-container'>
            <img src='https://www.example.com/image.jpg' alt=''><span>Description of the image</span>
        </div>Nullam ac mi non arcu mollis vestibulum eu id orci. Nam euismod gravida odio sed faucibus. Quisque nec justo ut diam imperdiet laoreet. Fusce vel lectus risus. Etiam at ligula in libero rhoncus tristique vitae a felis. Duis eget augue posuere, cursus ex sit amet, vulputate tortor. Sed et ante interdum, porta nisi eget, malesuada turpis. In non tincidunt nulla. Phasellus dictum scelerisque sapien quis tempor. Cras feugiat, velit ut fermentum sollicitudin, neque eros accumsan massa, sit amet interdum lacus purus non sem. Aenean condimentum risus vel dui ullamcorper varius. Curabitur porttitor ultrices dignissim.</div>
    </div>
</body>

Answer 2

View the Demo: http://example.com/demo/1/

CSS Styles:

.image-container {
    display:table;
    width:1px;
    float:right;
    border:1px solid #aaa;
    border-radius:5px;
    overflow:hidden;
    margin:10px;
}
.image-container img {
}
.image-container span {
   margin:10px;
}

HTML Code:

<body>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
    <div class="wrapper">
        <div class='image-container'>
            <img src='https://www.example.com/image.jpg' alt=''><span>Description of the image</span>
        </div>Nullam ac mi non arcu mollis vestibulum eu id orci. Nam euismod gravida odio sed faucibus. Quisque nec justo ut diam imperdiet laoreet. Fusce vel lectus risus. Etiam at ligula in libero rhoncus tristique vitae a felis. Duis eget augue posuere, cursus ex sit amet, vulputate tortor. Sed et ante interdum, porta nisi eget, malesuada turpis. In non tincidunt nulla. Phasellus dictum scelerisque sapien quis tempor. Cras feugiat, velit ut fermentum sollicitudin, neque eros accumsan massa, sit amet interdum lacus purus non sem. Aenean condimentum risus vel dui ullamcorper varius. Curabitur porttitor ultrices dignissim.</div>
    </div>
</body>

Limit the width of the div to match the width of its only child element

Answer №1

Similar questions

Align anchor tag text in the center vertically after adjusting its height using CSS

Launching a program through a web browser - a step-by-step guide

Positioning a logo in HTML/CSS so that it remains fixed at the top left corner regardless of the screen size

Creating a popup using JavaScript in an ASP.NET page can be challenging when it comes to passing values

Incorporating specialized pseudo CSS styling to a class

Animating HTML elements with JavaScript and CSS when hovering the mouse

Vue.js error: Unable to locate requested resources

Photo browser with RTL support and customized previous/next buttons using Framework7

Add the bannercode snippet found on a webpage

Utilize the entire width of the page by evenly dividing it into different components and considering the occurrence of maximum

Unusual actions from the jQuery Steps extension

JavaScript - Hover function not functioning properly

What is the best way to insert my words within the boundary?

Obtain the text from an altered stylesheet in Firefox

Live Server in VS Code not refreshing automatically as expected

Unable to apply CSS styles to a form input using Ajax

Transmitting information from HTML to a server using node.js

The art of applying styles through styled components

Step-by-step guide on concealing elements and subsequently displaying them upon clicking the containing DIV

Unlocking the power of grails arrays within Angular