Make wrapper take maximum width of child image?

Question

I'm not sure if I was able to word the question correctly but what I'm trying to accomplish is simple to see through example.

Pease take a look at this:

http://codepen.io/anon/pen/XKKvBx

I basically want that to look like this:

http://codepen.io/anon/pen/xOOvJB

But without giving the wqrapping div a fixed width. So basically I'd like the wrapper to take the width of the image and not the overextending text. Is there any way to do this?

Also note I can't use absolute positioning as the image and text coming through from the database will be different each time.

Code from first link:

<div class="wrapper">
  <img src="https://placekitten.com/300/300">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie. Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

.wrapper {
  border: 1px solid red;
  display: inline-block;
}

Code from second link:

<div class="wrapper">
  <img src="https://placekitten.com/300/300">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie. Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

.wrapper {
  width: 300px;
  border: 1px solid red;
}

score 3 · Accepted Answer · edited Feb 26 '19 at 15:00

There is one "hacky" way, using another display property for your wrapper, if you force it to be table and 1% width the img will break that width and set his own size as the width wrapper:

.wrapper {
  border: 1px solid red;
  display: table;
  width: 1%;
}

<div class="wrapper">
  <img src="http://www.fillmurray.com/284/196">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie.
    Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

I think this is the solution I saw...and it's not *hacky*...it just works. — Paulie_D, Jun 17 '16 at 15:08
using `table-caption` in `wrapper` after all works in chrome and not that "hacky" :) — dippas, Jun 17 '16 at 15:14

score 1 · Answer 2 · answered Jun 17 '16 at 15:10

1

No need of adding width and still display:table-caption works fine in both chrome and firefox try this,

.wrapper {
  border: 1px solid red;
  display: table-caption;
}

answered Jun 17 '16 at 15:10

frnt

8,199
2
19
23

dippas · Answer 3 · 2018-03-31T22:47:49.853

-1

EDIT: you can set wrapper as display: table-caption

.wrapper {
  border: 1px solid red;
  display: table-caption
}

<div class="wrapper">
  <img src="https://placehold.it/300x300">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie.
    Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

<hr />

<div class="wrapper">
  <img src="https://placehold.it/500x500">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie.
    Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

edited Mar 31 '18 at 22:47

answered Jun 17 '16 at 15:01

dippas

52,735
15
110
120

what searching? I didn't do any any search on this, I just tried on CodePen, what positions btw? – dippas Jun 17 '16 at 15:03
This looked promising but the width 100% doesn't work, – Jun 17 '16 at 15:03
@TK123 which browser are you using? – dippas Jun 17 '16 at 15:04
@dippas checked on chrome latest versions, firefox it works – Jun 17 '16 at 15:05
This is working but in my live site where the element has a lot more styles applied, it doesn't so I went with the other answer which did work on the live version. But this does work on the simplified example so +1 – Jun 17 '16 at 15:20
@TK123 no problem at all `:) ` here to help :) – dippas Jun 17 '16 at 15:22

Make wrapper take maximum width of child image?

3 Answers3

Linked

Related