Adjust div size directly off image, break text below

I am trying to adjust the div directly off an image dimension, causing any text below the image (inside the div) to break a line if needed.

It may sound confusing so let me try to explain it better. Here is a jsfiddle:

If you notice, the first box is taking up a lot of unnecessary space. It’s extending to the max-width of 500px when in reality, I would just want it to extend around the image. Here’s the code:

.grid li {
width: auto;
max-width: 500px;
min-width: 200px;
.grid img {
max-width: 500px;
height: auto;
margin: 0 auto;

If you notice the .grid li has a max-width and min-width. However, it seems the div is automatically extending to the max-width based on the text. What I want it to do is extend itself around the image and then cause all the text to break a line in order to fit the width of the image. How can I do this?

Source: html

Leave a Reply