One side of a row is aligned to the border. How to align the other side to the other elements in webpage?

If you check webflow website you will see what I want to accomplish when you go to: Customize your design for any device.

As you can see the image in column 2 is right at the border of the website. Column 1 is lined up to the website margin. I have already created the image going to the border of the website but that has screwed up the layout of the row and the other column (the one with the text) is not aligned like all the other elements inside the website. It has a different alignmente and it doesn’t look right.

So how can I have the row all the way to the border of the page from one side but have it align correctly to the website margin on the other side?

Thanks!

There are many ways to achieve this actually. The text, and everything that need to stay aligned within the site has to be put inside Containers widgets. For the image, it can be placed either on the container or in the section containing the container… but it has to get Absolute coordinates in order to be positionned freely. I would do the following:

  1. make sure the SECTION has position:relative property (it doesn’t change anuything visually)
  2. place image in the section, and give it position:absolute property. From there, click on the RIGT button and adjust the position for the image… it will position relatively to the section.

http://take.ms/bVfDz

1 Like

You can also see how the webflow team did it by watching their Making Webflow in Webflow video http://making.webflow.com/