0

I have a parent div that accommodates an image and a p element. I can't change the dimension of the image and the div width can't exceed the image width, so i make the image a block element. But after that i have a long text inside p element, and it makes p element 's width exceed its parent div width. How can make the p element 's width the same as its parents div and its sibling image.

<div>
    <img src="some-url">
    <p>some-really-long-text</p>
</div>

img {
    display: block;
}
Thuan Nguyen
  • 431
  • 6
  • 18

1 Answers1

1

Might not be the best solution:

div {
    display: table-caption;  
}

img {
    display: block;
}
<div>
    <img src="http://placehold.it/200x150">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pulvinar odio id felis maximus sodales. Vestibulum velit mi, feugiat at enim in, varius vestibulum erat. Fusce orci risus, laoreet nec enim et, placerat accumsan massa. In ut purus elit. Donec hendrerit velit id mi eleifend pharetra. Nunc imperdiet interdum interdum. Suspendisse tincidunt, augue in accumsan ornare, nulla nisl tempor purus, et molestie orci massa in nunc. Praesent faucibus enim eros, ut blandit nisi efficitur in. In tincidunt velit id urna vehicula, in condimentum odio convallis. Vestibulum ligula odio, egestas vel lectus sed, consectetur porta libero.</p>
</div>
Chris Hemmens
  • 367
  • 2
  • 11