How to give a DIV the width of its content? - css

Question

I would like to give a DIV the width of the picture in its content.
Here is my HTML :
<div id="container">
<div id="picandtext">
<img src="https://placehold.it/480x320" />
<p>Eodem tempore etiam Hymetii praeclarae indolis viri negotium est actitatum, cuius hunc novimus esse textum. cum Africam pro consule regeret Carthaginiensibus victus inopia iam lassatis, ex horreis Romano populo destinatis frumentum dedit, pauloque postea cum provenisset segetum copia, integre sine ulla restituit mora.</p>
</div>
</div>
Here is my CSS :
#container { height: 600px; display:table; width:1%; background: red; padding:10px; }
#picandtext { height: 400px; display:table; width:1%; background: green; padding:10px; }
#picandtext img { height: 180px; }
#picandtext p { height: 180px; }
I finally found a way to do it with display:table; width:1%; as you can see with this JSFiddle example : https://jsfiddle.net/Ls750c64/2/
But I would like to know if this way is the best one to make it ?

Answer 1

Given your existing markup, you can make #container display: inline-block; and absolutely position the p with text.
#container {
height: 600px;
display: inline-block;
background: red;
padding: 10px;
}
#picandtext {
height: 400px;
background: green;
padding: 10px;
position: relative;
}
#picandtext img {
height: 180px;
}
#picandtext p {
position: absolute;
left: 10px;
right: 10px;
}
<div id="container">
<div id="picandtext">
<img src="https://placehold.it/480x320" />
<p>Eodem tempore etiam Hymetii praeclarae indolis viri negotium est actitatum, cuius hunc novimus esse textum. cum Africam pro consule regeret Carthaginiensibus victus inopia iam lassatis, ex horreis Romano populo destinatis frumentum dedit, pauloque postea cum provenisset segetum copia, integre sine ulla restituit mora.</p>
</div>
</div>
And a less supported way to do it would be using intrinsic sizing. The browser support for it sucks though. http://caniuse.com/#feat=intrinsic-width
#container {
height: 600px;
display: inline-block;
background: red;
padding: 10px;
width: min-content;
}
#picandtext {
height: 400px;
background: green;
padding: 10px;
position: relative;
}
#picandtext img {
height: 180px;
}
<div id="container">
<div id="picandtext">
<img src="https://placehold.it/480x320" />
<p>Eodem tempore etiam Hymetii praeclarae indolis viri negotium est actitatum, cuius hunc novimus esse textum. cum Africam pro consule regeret Carthaginiensibus victus inopia iam lassatis, ex horreis Romano populo destinatis frumentum dedit, pauloque postea cum provenisset segetum copia, integre sine ulla restituit mora.</p>
</div>
</div>