How can I make a div in Webflow wrap its content and not take up the full width of the block, specifically when it contains a row of images?

To make a div in Webflow wrap its content—especially when it contains a row of images—you need to adjust the div's display, width, and alignment settings so it doesn't occupy 100% width by default.

1. Set the Div to Use Inline or Inline-Flex Display

• Select your div block in the Designer.
• In the Style panel, change the Display property from Block to either:
• Inline-block – wraps to the content size, still behaves like a block.
• Flex or Inline Flex – gives more layout control, but you must define direction.

2. Avoid 100% Width

• Make sure the Width of the div is set to Auto or a specific max-content adjusted through min width or flex children sizing.
• If using Flex, set the direction to horizontal (row) and Wrap: Wrap so that images wrap if they exceed the container.

3. Ensure Images Have Defined Size

• Images inside the div should have a fixed width (e.g., 150px) or be inline elements to prevent stretching the parent div.
• Alternatively, set each image’s Display to Inline-block to respect content sizing.

4. Remove Any Unwanted Max Width

• Check the parent container or the div itself for any Max Width or Width: 100% settings that force it to stretch.
• Adjust or remove those to allow the div to shrink to fit its content.

5. Optional: Adjust Margin or Justify Alignment

• If you want the div to wrap its content and stay left-, center-, or right-aligned, tweak its margin or use Justify Content settings (if using Flex):
• For center alignment, use margin: auto on both left and right.
• For right alignment, use margin-left: auto.

Summary

Set the div to display as inline-block or inline-flex, ensure its width is set to auto, and define image sizes inside it. Avoid 100% width settings in the div or its parent, and use margin or justify settings for alignment.