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?
TL;DR
- Set the div block to
display: inline-blockorflexwithwidth: autoto make it wrap around content. - Check parent containers to ensure they're not forcing full width by adjusting their width or display settings.
- Set images inside the div block to
display: inline-blockor useflexsettings to maintain proper wrapping.
If your div block in Webflow is stretching to the full width instead of wrapping tightly around its content (such as a row of images), you need to adjust its sizing and display settings.
1. Set the Div to "Inline Block" or "Flex"
Inline Block:
Select the div block.
In the Style panel, go to the Display setting.
Select Inline Block to make it wrap around only the width of its content.
Flexbox (Shrink to Content Width):
Set Display to Flex.
Choose Direction: Row to keep the images in a row.
Under Sizing, set Width: Auto so it only takes the space needed.
2. Ensure Parent Containers Don't Force Full Width
- If the div block is inside a container or section with
width: 100%, it might be forced to expand. - Check parent elements and set Max Width or display settings to allow wrapping behavior.
3. Set Images to Display Inline or Flex
- If images are inside the div block, set their Display to Inline-Block or use Flex settings inside the div.
- Avoid setting images to Block, which forces new lines and may affect wrapping.
Summary
Adjust the div block settings to display: inline-block or flex, ensure its width is set to auto, and avoid parent elements forcing a full-width container. This will ensure the div only wraps around its content without unnecessary extra space.