How can I create a full width container in Webflow with two 50% divs, where the left div has an image that fills the div space and adjusts when the right div has text?

Published on
September 22, 2023

To create a full-width container in Webflow with two 50% divs, where the left div contains an image that fills the div space and adjusts when the right div has text, you can follow these steps:

  1. Create a new section on your Webflow page by clicking the "+" button or using the shortcut Cmd/Ctrl + Shift + S.
  2. Set the width of the section to 100% by selecting it and going to the Styles panel on the right-hand side. Under Width, click the dropdown menu and choose 100%.
  3. Add a div block inside the section by clicking the "+" button or pressing the shortcut Cmd/Ctrl + Shift + D.
  4. Set the display property of the div block to flex by selecting it and going to the Styles panel. Under Display, choose Flex.
  5. Set the flex direction property of the div block to row by going to the Styles panel and selecting Flexbox. Under Flex Direction, choose Row.
  6. Add a new div block inside the first div block by following the same steps as in step 3.
  7. Set the width property of the first div block to 50% by selecting it and going to the Styles panel. Under Width, type in "50%". You can also use the drag handle to adjust the width visually.
  8. Add an image to the first div block by clicking on it and going to the Styles panel. Under Background Image, click the "+" button to upload/select your image. Make sure to choose Cover as the background size to ensure the image fills the div space.
  9. Add a second div block inside the parent div block by following the same steps as in step 6.
  10. Set the width property of the second div block to 50%, just like in step 7.
  11. Add your text content to the second div block by clicking on it and typing or pasting your text.
  12. Adjust the padding or margin of the div blocks as necessary to create spacing between them.

By following these steps, you can create a full-width container in Webflow with two 50% divs, where the left div contains an image that fills the div space and adjusts when the right div has text.

Additional Questions:

  1. How do I create a full-width container in Webflow?
  2. How can I use flexbox in Webflow to position elements?
  3. Can I upload and use images as backgrounds in Webflow?