Reduce div width to size of child paragraphs and image

Question

So I have this kind of structure:

<div class="caption">
    <img src="...">
    <p>Something</p>
    <p>SomethingElse</p>
    <p>SomethingElseAgain</p>
</div>

Every paragraph MUST be in its own line, justified to the left, and my .caption div must not take any more horizontal space than its children need.

I tried with .caption { display: inline-block; } but that doesn't reduce the caption div at all.

I tried adding float: left to div.caption children, but all <p> tags got jumbled in one line.

How should I do this? I'm using plain html+css

score 2 · Accepted Answer · answered Jun 06 '22 at 21:36

In modern browsers you can simply use fit-content:

.caption {
  border:1px solid red;
  width:fit-content;
}

<div class="caption">
    <img src="...">
    <p>Something</p>
    <p>SomethingElse</p>
    <p>SomethingElseAgain</p>
</div>
Something else

score 2 · Answer 2 · answered Jun 06 '22 at 21:46

<div class="caption">
    <img src="...">
    <p>Something</p>
    <p>SomethingElse</p>
    <p>SomethingElseAgain</p>
</div>

<style>
 .caption {
     width: auto;
     height: auto;
 }
 .caption img {
     width:200px;
     height:200px;
 }
 .caption p {
     display: block;
     text-align: left;
 }
</style>

Reduce div width to size of child paragraphs and image

2 Answers2