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:
- Create a new section on your Webflow page by clicking the "+" button or using the shortcut Cmd/Ctrl + Shift + S.
- 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%.
- Add a div block inside the section by clicking the "+" button or pressing the shortcut Cmd/Ctrl + Shift + D.
- Set the display property of the div block to flex by selecting it and going to the Styles panel. Under Display, choose Flex.
- 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.
- Add a new div block inside the first div block by following the same steps as in step 3.
- 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.
- 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.
- Add a second div block inside the parent div block by following the same steps as in step 6.
- Set the width property of the second div block to 50%, just like in step 7.
- Add your text content to the second div block by clicking on it and typing or pasting your text.
- 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:
- How do I create a full-width container in Webflow?
- How can I use flexbox in Webflow to position elements?
- Can I upload and use images as backgrounds in Webflow?