What options are available in Webflow for placing two div boxes next to each other, with one being a Flexbox Div and the other potentially being one? Is there a way to achieve this without coding by creating a parent flexbox to hold both divs vertically?

To place two div boxes side by side in Webflow, especially when one or both are Flex containers, you can absolutely achieve this with no code by using Webflow's layout settings. Here's how to do it cleanly using a parent Flex container.  

​

1. Use a Parent Flex Container

​

• Add a new Div block on your canvas and name it something like Wrapper or Flex Parent.
• Select the parent Div, go to the Style panel, and under Layout, set Display: Flex with Direction: Horizontal (Row).
• This will allow any child elements (like your two Divs) to sit side by side, horizontally.

​

2. Add Two Child Div Blocks

​

• Inside the Flex Parent, add two Div blocks. These will be Div A and Div B.
• These will automatically align next to each other due to the parent’s flex row layout.

​

3. Set One or Both Child Divs as Flex Containers (Optional)

​

• You can go into either Div A or Div B and change their own Display to Flex to manage internal items (e.g., vertically align text, layout buttons, image & text, etc.).
• Webflow allows nested Flex containers, so you’re fully supported to make a child div a Flexbox even if it's inside a flex parent.

​

4. Adjust Widths or Flex Grow

​

• Ensure your two Divs actually have space by either:
• Setting fixed widths in pixels or % (e.g., 50% each),
• Or using Flex Grow: 1 so they stretch equally within the parent,
• Or manually tailoring widths to suit your needs (e.g., one at 30%, the other at 70%).

​

Summary

​

To place divs side-by-side—where one or both are Flex containers—simply wrap them in a parent Div set to Display: Flex with horizontal layout. This fully supports nested Flex children and requires no custom code.